@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/hooks/demo.tsx

@@ -0,0 +1,2757 @@
+import React, { useState, useRef } from 'react';
+import { Button, cn, } from "~/components/catalyst-ui";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "~/components/catalyst-ui";
+import { useFocusWithin, useFocus, usePress, useLongPress, useKeyboard, useHover, useMove, useMountEffect, useUpdateEffect, useUnmountEffect, useEventListener, useOverlayListener, useFavicon, usePrevious, useForm, useFetch, useAsync, useIntersectionObserver, useScrollPosition, useWindowSize, useOnlineStatus, useKeyPress, useClickOutside, useTimeout, useInterval, useCounter, useToggle, useThrottle, useDebounce, useSessionStorage, useLocalStorage, useMediaQuery, useDebouncedFuseSearch, useFuseSearch, useFuzzySearch, useExport, useMounted, useIsMobile, useCopyToClipboard, useResizeListener, useHydrated, useSlideInV1, } from './index';
+import { useBreakpoint, } from './use-breakpoint';
+import { useTimer, } from './use-timer';
+import { useSecFetchParser, } from './use-sec-fetch-parser';
+import { useOnClickOutside, } from './use-on-click-outside';
+import { useScrollLock, } from './use-scroll-lock';
+import { useScreen, } from './use-screen';
+import { useScript, } from './use-script';
+import { useReadLocalStorage, } from './use-read-local-storage';
+import { useResizeObserver, } from './use-resize-observer';
+import { useEventCallback, } from './use-event-callback';
+import { useIsClient, } from './use-is-client';
+import { useIsomorphicLayoutEffect, } from './use-isomorphic-layout-effect';
+import { useDocumentTitle, } from './use-document-title';
+import { useGoogleFont, } from './use-google-font';
+import { useExpandable } from './use-expandable'
+import { useColorTheme } from './use-color-theme'
+
+
+
+export function GetColorThemeDemo() {
+  const neutralV4Root = useColorTheme('neutral', 'v4', 'root')
+  const neutralV4Dark = useColorTheme('neutral', 'v4', 'dark')
+
+  const applyTheme = (theme: Record<string, string>) => {
+    Object.entries(theme).forEach(([property, value]) => {
+      document.documentElement.style.setProperty(property, value)
+    })
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-6xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Color Theme Hook Demo</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="border border-border rounded-lg p-4 bg-card">
+            <h3 className="text-lg font-semibold mb-3">Neutral V4 Root</h3>
+            <pre className="text-xs bg-background-secondary p-3 rounded overflow-auto">
+              {JSON.stringify(neutralV4Root, null, 2)}
+            </pre>
+            <button
+              className="mt-4 bg-primary text-primary-foreground px-4 py-2 rounded text-sm hover:bg-primary/90"
+              onClick={() => applyTheme(neutralV4Root)}
+            >
+              Apply Root Theme
+            </button>
+          </div>
+          <div className="border border-border rounded-lg p-4 bg-card">
+            <h3 className="text-lg font-semibold mb-3">Neutral V4 Dark</h3>
+            <pre className="text-xs bg-background-secondary p-3 rounded overflow-auto">
+              {JSON.stringify(neutralV4Dark, null, 2)}
+            </pre>
+            <button
+              className="mt-4 bg-primary text-primary-foreground px-4 py-2 rounded text-sm hover:bg-primary/90"
+              onClick={() => applyTheme(neutralV4Dark)}
+            >
+              Apply Dark Theme
+            </button>
+          </div>
+        </div>
+        <div className="mt-6 p-4 border border-border rounded-lg">
+          <h3 className="text-lg font-semibold mb-3">Usage Examples</h3>
+          <div className="space-y-4">
+            <pre className="text-xs bg-background-secondary p-3 rounded overflow-auto">
+              {`// Get neutral v4 root theme
+const theme = useColorTheme('neutral', 'v4', 'root')
+
+// Apply to document
+Object.entries(theme).forEach(([property, value]) => {
+document.documentElement.style.setProperty(property, value)
+})
+
+// Use with defaults (neutral, v4, root)
+const defaultTheme = useColorTheme()`}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseAutoScrollDemo() {
+  const [messages, setMessages] = useState<string[]>([
+    "Welcome to the chat!",
+    "This is a demo of the useAutoScroll hook.",
+  ]);
+
+  const { scrollRef, isAtBottom, scrollToBottom } = useAutoScroll({
+    content: messages,
+    smooth: true,
+    offset: 20,
+  });
+
+  const addMessage = () => {
+    setMessages((prev) => [
+      ...prev,
+      `Message ${prev.length + 1} - ${new Date().toLocaleTimeString()}`,
+    ]);
+  };
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Auto Scroll Chat Demo</h2>
+        <div className="space-y-4">
+          <div className="relative">
+            <div
+              ref={scrollRef}
+              className="h-96 overflow-y-auto border border-border rounded-lg p-4 bg-background space-y-2"
+            >
+              {messages.map((message, index) => (
+                <div
+                  key={index}
+                  className="p-3 bg-muted rounded-md text-foreground"
+                >
+                  {message}
+                </div>
+              ))}
+            </div>
+            {!isAtBottom && (
+              <Button
+                onClick={scrollToBottom}
+                variant="filled"
+                size="icon"
+                className="absolute bottom-4 right-4 shadow-lg"
+              >
+                <ArrowDown />
+              </Button>
+            )}
+          </div>
+          <Button onClick={addMessage} variant="default">
+            Add Message
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+export function UseClientDemo() {
+  const client1 = useClient()
+  const client2 = useClient()
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Basic Loading Button</h3>
+          <Button
+            className="group relative disabled:opacity-100"
+            data-loading={client1.isLoading || undefined}
+            disabled={client1.isLoading}
+            onClick={() => client1.handleClick()}
+          >
+            <span className="group-data-[loading]:text-transparent">Click me</span>
+            {client1.isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <LoaderCircle
+                  aria-hidden="true"
+                  className="animate-spin"
+                  size={16}
+                />
+              </div>
+            )}
+          </Button>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">With Async Callback</h3>
+          <Button
+            className="group relative disabled:opacity-100"
+            data-loading={client2.isLoading || undefined}
+            disabled={client2.isLoading}
+            onClick={() => client2.handleClick(async () => {
+              await new Promise(resolve => setTimeout(resolve, 2000))
+            })}
+          >
+            <span className="group-data-[loading]:text-transparent">Async Action</span>
+            {client2.isLoading && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <LoaderCircle
+                  aria-hidden="true"
+                  className="animate-spin"
+                  size={16}
+                />
+              </div>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseCurrentTimeIndicatorDemo() {
+  const today = new Date()
+  const dayView = useCurrentTimeIndicator({ currentDate: today, view: "day" })
+  const weekView = useCurrentTimeIndicator({ currentDate: today, view: "week" })
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Day View</h3>
+          <div className="relative h-96 bg-muted rounded-lg border border-border overflow-hidden">
+            <div className="absolute inset-0 flex flex-col">
+              {Array.from({ length: 24 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="flex-1 border-b border-border/50 flex items-center px-4 text-xs text-muted-foreground"
+                >
+                  {i.toString().padStart(2, "0")}:00
+                </div>
+              ))}
+            </div>
+            {dayView.currentTimeVisible && (
+              <div
+                className="absolute left-0 right-0 h-0.5 bg-destructive z-10"
+                style={{ top: `${dayView.currentTimePosition}%` }}
+              >
+                <div className="absolute -left-1 -top-1.5 w-3 h-3 bg-destructive rounded-full" />
+              </div>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Visible: {dayView.currentTimeVisible ? "Yes" : "No"} | Position: {dayView.currentTimePosition.toFixed(2)}%
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Week View</h3>
+          <div className="relative h-96 bg-muted rounded-lg border border-border overflow-hidden">
+            <div className="absolute inset-0 flex flex-col">
+              {Array.from({ length: 24 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="flex-1 border-b border-border/50 flex items-center px-4 text-xs text-muted-foreground"
+                >
+                  {i.toString().padStart(2, "0")}:00
+                </div>
+              ))}
+            </div>
+            {weekView.currentTimeVisible && (
+              <div
+                className="absolute left-0 right-0 h-0.5 bg-destructive z-10"
+                style={{ top: `${weekView.currentTimePosition}%` }}
+              >
+                <div className="absolute -left-1 -top-1.5 w-3 h-3 bg-destructive rounded-full" />
+              </div>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Visible: {weekView.currentTimeVisible ? "Yes" : "No"} | Position: {weekView.currentTimePosition.toFixed(2)}%
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UsePaginationDemo() {
+  const [currentPage1, setCurrentPage1] = useState(1)
+  const [currentPage2, setCurrentPage2] = useState(5)
+
+  const pagination1 = usePagination({
+    currentPage: currentPage1,
+    totalPages: 10,
+    paginationItemsToDisplay: 5,
+  })
+
+  const pagination2 = usePagination({
+    currentPage: currentPage2,
+    totalPages: 50,
+    paginationItemsToDisplay: 7,
+  })
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Basic Pagination (10 pages, show 5)</h3>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage1(Math.max(1, currentPage1 - 1))}
+            disabled={currentPage1 === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          {pagination1.showLeftEllipsis && (
+            <>
+              <Button
+                variant={currentPage1 === 1 ? "default" : "outline"}
+                onClick={() => setCurrentPage1(1)}
+              >
+                1
+              </Button>
+              <span className="px-2 text-muted-foreground">...</span>
+            </>
+          )}
+
+          {pagination1.pages.map((page) => (
+            <Button
+              key={page}
+              variant={currentPage1 === page ? "default" : "outline"}
+              onClick={() => setCurrentPage1(page)}
+            >
+              {page}
+            </Button>
+          ))}
+
+          {pagination1.showRightEllipsis && (
+            <>
+              <span className="px-2 text-muted-foreground">...</span>
+              <Button
+                variant={currentPage1 === 10 ? "default" : "outline"}
+                onClick={() => setCurrentPage1(10)}
+              >
+                10
+              </Button>
+            </>
+          )}
+
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage1(Math.min(10, currentPage1 + 1))}
+            disabled={currentPage1 === 10}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Current Page: {currentPage1} | Pages: {pagination1.pages.join(", ")}
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Large Pagination (50 pages, show 7)</h3>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage2(Math.max(1, currentPage2 - 1))}
+            disabled={currentPage2 === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          {pagination2.showLeftEllipsis && (
+            <>
+              <Button
+                variant={currentPage2 === 1 ? "default" : "outline"}
+                onClick={() => setCurrentPage2(1)}
+              >
+                1
+              </Button>
+              <span className="px-2 text-muted-foreground">...</span>
+            </>
+          )}
+
+          {pagination2.pages.map((page) => (
+            <Button
+              key={page}
+              variant={currentPage2 === page ? "default" : "outline"}
+              onClick={() => setCurrentPage2(page)}
+            >
+              {page}
+            </Button>
+          ))}
+
+          {pagination2.showRightEllipsis && (
+            <>
+              <span className="px-2 text-muted-foreground">...</span>
+              <Button
+                variant={currentPage2 === 50 ? "default" : "outline"}
+                onClick={() => setCurrentPage2(50)}
+              >
+                50
+              </Button>
+            </>
+          )}
+
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage2(Math.min(50, currentPage2 + 1))}
+            disabled={currentPage2 === 50}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Current Page: {currentPage2} | Pages: {pagination2.pages.join(", ")}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function UseFileUploadDemo() {
+  const [singleState, singleActions] = useFileUpload({
+    maxSize: 5 * 1024 * 1024,
+    accept: "image/*",
+    multiple: false,
+  })
+
+  const [multipleState, multipleActions] = useFileUpload({
+    maxFiles: 3,
+    maxSize: 10 * 1024 * 1024,
+    accept: "*",
+    multiple: true,
+  })
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Single File Upload</h3>
+        <div
+          onDragEnter={singleActions.handleDragEnter}
+          onDragLeave={singleActions.handleDragLeave}
+          onDragOver={singleActions.handleDragOver}
+          onDrop={singleActions.handleDrop}
+          className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${singleState.isDragging
+            ? "border-primary bg-primary/5"
+            : "border-border"
+            }`}
+        >
+          <input {...singleActions.getInputProps()} className="hidden" />
+          <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <p className="text-sm text-muted-foreground mb-2">
+            Drag and drop an image here, or click to select
+          </p>
+          <Button onClick={singleActions.openFileDialog} variant="outline">
+            Select File
+          </Button>
+        </div>
+
+        {singleState.errors.length > 0 && (
+          <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
+            {singleState.errors.map((error, i) => (
+              <p key={i} className="text-sm text-destructive">
+                {error}
+              </p>
+            ))}
+          </div>
+        )}
+
+        {singleState.files.length > 0 && (
+          <div className="space-y-2">
+            {singleState.files.map((file) => (
+              <div
+                key={file.id}
+                className="flex items-center gap-3 p-3 bg-muted rounded-lg"
+              >
+                {file.preview && (
+                  <img
+                    src={file.preview}
+                    alt={file.file.name}
+                    className="w-12 h-12 object-cover rounded"
+                  />
+                )}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">
+                    {file.file.name}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatBytes(file.file.size)}
+                  </p>
+                </div>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => singleActions.removeFile(file.id)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Multiple File Upload (Max 3)</h3>
+        <div
+          onDragEnter={multipleActions.handleDragEnter}
+          onDragLeave={multipleActions.handleDragLeave}
+          onDragOver={multipleActions.handleDragOver}
+          onDrop={multipleActions.handleDrop}
+          className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${multipleState.isDragging
+            ? "border-primary bg-primary/5"
+            : "border-border"
+            }`}
+        >
+          <input {...multipleActions.getInputProps()} className="hidden" />
+          <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <p className="text-sm text-muted-foreground mb-2">
+            Drag and drop files here, or click to select
+          </p>
+          <Button onClick={multipleActions.openFileDialog} variant="outline">
+            Select Files
+          </Button>
+        </div>
+
+        {multipleState.errors.length > 0 && (
+          <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
+            {multipleState.errors.map((error, i) => (
+              <p key={i} className="text-sm text-destructive">
+                {error}
+              </p>
+            ))}
+          </div>
+        )}
+
+        {multipleState.files.length > 0 && (
+          <div className="space-y-2">
+            {multipleState.files.map((file) => (
+              <div
+                key={file.id}
+                className="flex items-center gap-3 p-3 bg-muted rounded-lg"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">
+                    {file.file.name}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatBytes(file.file.size)}
+                  </p>
+                </div>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => multipleActions.removeFile(file.id)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+
+export function UseEventVisibilityDemo() {
+  const visibility1 = useEventVisibility({ eventHeight: 32, eventGap: 4 })
+  const visibility2 = useEventVisibility({ eventHeight: 48, eventGap: 8 })
+
+  const events1 = Array.from({ length: 10 }, (_, i) => `Event ${i + 1}`)
+  const events2 = Array.from({ length: 15 }, (_, i) => `Event ${i + 1}`)
+
+  const visibleCount1 = visibility1.getVisibleEventCount(events1.length)
+  const visibleCount2 = visibility2.getVisibleEventCount(events2.length)
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Small Events (32px height, 4px gap)</h3>
+          <div
+            ref={visibility1.contentRef}
+            className="h-64 bg-muted rounded-lg border border-border p-4 overflow-hidden"
+          >
+            <div className="space-y-1">
+              {events1.slice(0, visibleCount1).map((event, i) => (
+                <div
+                  key={i}
+                  className="h-8 bg-primary text-primary-foreground rounded px-3 flex items-center text-sm"
+                >
+                  {event}
+                </div>
+              ))}
+              {visibleCount1 < events1.length && (
+                <button className="h-8 w-full bg-secondary text-secondary-foreground rounded px-3 flex items-center justify-center text-sm hover:bg-secondary/80">
+                  +{events1.length - visibleCount1} more
+                </button>
+              )}
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Showing {visibleCount1} of {events1.length} events (Height: {visibility1.contentHeight}px)
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Large Events (48px height, 8px gap)</h3>
+          <div
+            ref={visibility2.contentRef}
+            className="h-64 bg-muted rounded-lg border border-border p-4 overflow-hidden"
+          >
+            <div className="space-y-2">
+              {events2.slice(0, visibleCount2).map((event, i) => (
+                <div
+                  key={i}
+                  className="h-12 bg-accent text-accent-foreground rounded px-4 flex items-center text-sm font-medium"
+                >
+                  {event}
+                </div>
+              ))}
+              {visibleCount2 < events2.length && (
+                <button className="h-12 w-full bg-secondary text-secondary-foreground rounded px-4 flex items-center justify-center text-sm font-medium hover:bg-secondary/80">
+                  +{events2.length - visibleCount2} more
+                </button>
+              )}
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Showing {visibleCount2} of {events2.length} events (Height: {visibility2.contentHeight}px)
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+export function UseSliderWithInputDemo() {
+  const singleSlider = useSliderWithInput({
+    minValue: 0,
+    maxValue: 100,
+    initialValue: [50],
+    defaultValue: [50],
+  })
+
+  const rangeSlider = useSliderWithInput({
+    minValue: 0,
+    maxValue: 1000,
+    initialValue: [200, 800],
+    defaultValue: [200, 800],
+  })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Label>Single Value Slider</Label>
+          {singleSlider.showReset && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={singleSlider.resetToDefault}
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Reset
+            </Button>
+          )}
+        </div>
+        <div className="flex items-center gap-4">
+          <Slider
+            value={singleSlider.sliderValue}
+            onValueChange={singleSlider.handleSliderChange}
+            min={0}
+            max={100}
+            step={1}
+            className="flex-1"
+          />
+          <Input
+            type="text"
+            value={singleSlider.inputValues[0]}
+            onChange={(e) => singleSlider.handleInputChange(e, 0)}
+            onBlur={(e) =>
+              singleSlider.validateAndUpdateValue(e.target.value, 0)
+            }
+            className="w-20"
+          />
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Current Value: {singleSlider.sliderValue[0]}
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Label>Range Slider</Label>
+          {rangeSlider.showReset && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={rangeSlider.resetToDefault}
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Reset
+            </Button>
+          )}
+        </div>
+        <div className="space-y-3">
+          <Slider
+            value={rangeSlider.sliderValue}
+            onValueChange={rangeSlider.handleSliderChange}
+            min={0}
+            max={1000}
+            step={10}
+          />
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <Label className="text-xs text-muted-foreground">Min</Label>
+              <Input
+                type="text"
+                value={rangeSlider.inputValues[0]}
+                onChange={(e) => rangeSlider.handleInputChange(e, 0)}
+                onBlur={(e) =>
+                  rangeSlider.validateAndUpdateValue(e.target.value, 0)
+                }
+              />
+            </div>
+            <div className="flex-1">
+              <Label className="text-xs text-muted-foreground">Max</Label>
+              <Input
+                type="text"
+                value={rangeSlider.inputValues[1]}
+                onChange={(e) => rangeSlider.handleInputChange(e, 1)}
+                onBlur={(e) =>
+                  rangeSlider.validateAndUpdateValue(e.target.value, 1)
+                }
+              />
+            </div>
+          </div>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Range: {rangeSlider.sliderValue[0]} - {rangeSlider.sliderValue[1]}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function UseCharacterLimitDemo() {
+  const inputLimit = useCharacterLimit({ maxLength: 50 })
+  const textareaLimit = useCharacterLimit({ maxLength: 200 })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="input-demo">Input with Character Limit</Label>
+          <Input
+            id="input-demo"
+            value={inputLimit.value}
+            onChange={inputLimit.handleChange}
+            placeholder="Type something..."
+          />
+          <p className="text-sm text-muted-foreground mt-2">
+            {inputLimit.characterCount}/{inputLimit.maxLength} characters
+          </p>
+        </div>
+
+        <div>
+          <Label htmlFor="textarea-demo">Textarea with Character Limit</Label>
+          <Textarea
+            id="textarea-demo"
+            value={textareaLimit.value}
+            onChange={textareaLimit.handleChange}
+            placeholder="Type a longer message..."
+            rows={4}
+          />
+          <p className="text-sm text-muted-foreground mt-2">
+            {textareaLimit.characterCount}/{textareaLimit.maxLength} characters
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+export function UseExpandableDemo() {
+  const demo1 = useExpandable(false);
+  const demo2 = useExpandable(true);
+
+  return (
+    <div className="space-y-6 p-6 max-w-2xl mx-auto">
+      <div className="space-y-2">
+        <button
+          onClick={demo1.toggleExpand}
+          className="px-4 py-2 rounded-md bg-primary text-primary-foreground"
+        >
+          Toggle First (Currently: {demo1.isExpanded ? 'Expanded' : 'Collapsed'})
+        </button>
+        {demo1.isExpanded && (
+          <div className="p-4 border rounded-lg bg-background">
+            First expandable content
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <button
+          onClick={demo2.toggleExpand}
+          className="px-4 py-2 rounded-md bg-secondary text-secondary-foreground"
+        >
+          Toggle Second (Currently: {demo2.isExpanded ? 'Expanded' : 'Collapsed'})
+        </button>
+        {demo2.isExpanded && (
+          <div className="p-4 border rounded-lg bg-background">
+            Second expandable content (starts expanded)
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function UseGoogleFontDemo() {
+  useGoogleFont('Roboto')
+  useGoogleFont('Playfair Display', { weights: ['400', '700'] })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Default Font (Roboto)</h2>
+        <p style={{ fontFamily: 'Roboto' }} className="text-lg">
+          This text uses the Roboto font loaded via Google Fonts.
+        </p>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Custom Weights (Playfair Display)</h2>
+        <p style={{ fontFamily: 'Playfair Display' }} className="text-lg">
+          This text uses Playfair Display with custom weights (400, 700).
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function UseDocumentTitleDemo() {
+  const [count, setCount] = useState(0)
+  const [status, setStatus] = useState<'idle' | 'active' | 'completed'>('idle')
+  const [customTitle, setCustomTitle] = useState('Demo Page')
+
+  const getTitle = () => {
+    if (status === 'active') {
+      return `(${count}) ${customTitle} - Active`
+    } else if (status === 'completed') {
+      return `✓ ${customTitle} - Completed`
+    }
+    return customTitle
+  }
+
+  useDocumentTitle(getTitle())
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Dynamic Document Title</h2>
+        <p className="text-muted-foreground mb-4">
+          The browser tab title updates automatically based on the state below. Check your browser
+          tab to see the changes!
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-3">Custom Title Input</h3>
+        <input
+          type="text"
+          value={customTitle}
+          onChange={(e) => setCustomTitle(e.target.value)}
+          placeholder="Enter page title"
+          className="flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-all placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+        />
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-3">Status Control</h3>
+        <div className="flex gap-2 flex-wrap">
+          <button
+            onClick={() => setStatus('idle')}
+            className={cn(
+              'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2',
+              status === 'idle'
+                ? 'bg-primary text-primary-foreground shadow-xs'
+                : 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground'
+            )}
+          >
+            Idle
+          </button>
+          <button
+            onClick={() => setStatus('active')}
+            className={cn(
+              'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2',
+              status === 'active'
+                ? 'bg-primary text-primary-foreground shadow-xs'
+                : 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground'
+            )}
+          >
+            Active
+          </button>
+          <button
+            onClick={() => setStatus('completed')}
+            className={cn(
+              'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2',
+              status === 'completed'
+                ? 'bg-primary text-primary-foreground shadow-xs'
+                : 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground'
+            )}
+          >
+            Completed
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-3">Notification Counter</h3>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Unread Count:</p>
+            <p className="text-3xl font-mono font-bold">{count}</p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setCount((c) => c + 1)}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+            >
+              Add Notification
+            </button>
+            <button
+              onClick={() => setCount(0)}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="p-4 border rounded-md bg-blue-500/10 border-blue-500/20">
+        <p className="text-sm font-medium mb-2">Current Document Title:</p>
+        <p className="text-lg font-mono font-bold">{getTitle()}</p>
+      </div>
+    </div>
+  )
+}
+
+export function UseEventCallbackDemo() {
+  const [count, setCount] = useState(0)
+  const [log, setLog] = useState<string[]>([])
+
+  const handleClick = useEventCallback(() => {
+    const message = `Clicked with count: ${count}`
+    setLog((prev) => [...prev, message])
+  })
+
+  const handleReset = () => {
+    setCount(0)
+    setLog([])
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Stable Callback with Fresh Values</h2>
+        <p className="text-muted-foreground mb-4">
+          The callback always accesses the latest count value without recreating the function
+          reference.
+        </p>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Current Count:</p>
+            <p className="text-3xl font-mono font-bold">{count}</p>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setCount((c) => c + 1)}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+            >
+              Increment Count
+            </button>
+            <button
+              onClick={handleClick}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground"
+            >
+              Log Current Count
+            </button>
+            <button
+              onClick={handleReset}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-destructive text-white shadow-xs hover:bg-destructive/90"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Event Log</h2>
+        <div className="p-4 border rounded-md bg-muted/50 min-h-[200px] max-h-[300px] overflow-y-auto">
+          {log.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No events logged yet. Click "Log Current Count" to see the stable callback in action.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {log.map((entry, index) => (
+                <div key={index} className="text-sm font-mono">
+                  <span className="text-muted-foreground">{index + 1}.</span> {entry}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+export function UseIsClientDemo() {
+  const isClient = useIsClient()
+  const [randomValue, setRandomValue] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (isClient) {
+      setRandomValue(Math.random())
+    }
+  }, [isClient])
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Client Detection Status</h2>
+        <div className="p-4 border rounded-md bg-muted/50">
+          <div className="flex items-center gap-2 mb-4">
+            <div
+              className={cn(
+                'size-3 rounded-full',
+                isClient ? 'bg-green-500' : 'bg-gray-400'
+              )}
+            />
+            <span className="text-lg font-mono font-bold">
+              {isClient ? 'Client-Side' : 'Server-Side / Hydrating'}
+            </span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            This boolean is false during SSR and becomes true after hydration completes.
+          </p>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Browser API Access</h2>
+        <div className="space-y-4">
+          {isClient ? (
+            <div className="p-4 border rounded-md bg-muted/50 space-y-2">
+              <div>
+                <p className="text-sm text-muted-foreground">User Agent:</p>
+                <p className="text-sm font-mono break-all">{navigator.userAgent}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Window Width:</p>
+                <p className="text-sm font-mono">{window.innerWidth}px</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Random Value:</p>
+                <p className="text-sm font-mono">{randomValue?.toFixed(4)}</p>
+              </div>
+            </div>
+          ) : (
+            <div className="p-4 border rounded-md bg-muted/50">
+              <p className="text-sm text-muted-foreground">Loading browser information...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+export function UseIsomorphicLayoutEffectDemo() {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+  const [color, setColor] = useState('blue')
+  const boxRef = React.useRef<HTMLDivElement>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    if (boxRef.current) {
+      const { width, height } = boxRef.current.getBoundingClientRect()
+      setDimensions({ width, height })
+    }
+  }, [color])
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Synchronous DOM Measurement</h2>
+        <p className="text-muted-foreground mb-4">
+          This hook uses useLayoutEffect in the browser and useEffect on the server to prevent SSR
+          warnings while maintaining synchronous DOM access.
+        </p>
+        <div className="space-y-4">
+          <div
+            ref={boxRef}
+            className={cn(
+              'p-8 rounded-md transition-colors',
+              color === 'blue' && 'bg-blue-500',
+              color === 'green' && 'bg-green-500',
+              color === 'red' && 'bg-red-500'
+            )}
+          >
+            <p className="text-white font-medium">Resizable Box</p>
+          </div>
+
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Box Dimensions (measured synchronously):</p>
+            <div className="space-y-1 text-sm">
+              <p>
+                Width: <span className="font-mono font-bold">{dimensions.width.toFixed(2)}px</span>
+              </p>
+              <p>
+                Height:{' '}
+                <span className="font-mono font-bold">{dimensions.height.toFixed(2)}px</span>
+              </p>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setColor('blue')}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-blue-500 text-white shadow-xs hover:bg-blue-600"
+            >
+              Blue
+            </button>
+            <button
+              onClick={() => setColor('green')}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-green-500 text-white shadow-xs hover:bg-green-600"
+            >
+              Green
+            </button>
+            <button
+              onClick={() => setColor('red')}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-red-500 text-white shadow-xs hover:bg-red-600"
+            >
+              Red
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseReadLocalStorageDemo() {
+  const [writeValue, setWriteValue] = useState('Hello World')
+  const storedValue = useReadLocalStorage<string>('demo-key')
+  const storedObject = useReadLocalStorage<{ count: number }>('demo-object')
+
+  const handleWrite = () => {
+    window.localStorage.setItem('demo-key', JSON.stringify(writeValue))
+    window.dispatchEvent(
+      new StorageEvent('storage', {
+        key: 'demo-key',
+        newValue: JSON.stringify(writeValue),
+        storageArea: window.localStorage,
+      })
+    )
+  }
+
+  const handleWriteObject = () => {
+    const newCount = (storedObject?.count || 0) + 1
+    window.localStorage.setItem('demo-object', JSON.stringify({ count: newCount }))
+    window.dispatchEvent(
+      new StorageEvent('storage', {
+        key: 'demo-object',
+        newValue: JSON.stringify({ count: newCount }),
+        storageArea: window.localStorage,
+      })
+    )
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Basic String Reading</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Stored Value:</p>
+            <p className="text-lg font-mono">{storedValue || 'null'}</p>
+          </div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={writeValue}
+              onChange={(e) => setWriteValue(e.target.value)}
+              className="flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-all placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+              placeholder="Enter value"
+            />
+            <button
+              onClick={handleWrite}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+            >
+              Write
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Object Reading</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Counter Value:</p>
+            <p className="text-lg font-mono">{storedObject?.count || 0}</p>
+          </div>
+          <button
+            onClick={handleWriteObject}
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+          >
+            Increment Counter
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+export function UseResizeObserverDemo() {
+  const contentBoxRef = useRef<HTMLDivElement>(null)
+  const borderBoxRef = useRef<HTMLDivElement>(null)
+
+  const contentBoxSize = useResizeObserver({
+    ref: contentBoxRef,
+    box: 'content-box',
+  })
+
+  const borderBoxSize = useResizeObserver({
+    ref: borderBoxRef,
+    box: 'border-box',
+  })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Content Box Measurement</h2>
+        <div
+          ref={contentBoxRef}
+          className="resize overflow-auto border-4 border-primary p-8 rounded-md bg-muted min-h-[150px] min-w-[200px]"
+        >
+          <p className="text-sm font-medium mb-2">Resize this container (drag bottom-right corner)</p>
+          <div className="space-y-1 text-sm">
+            <p>Width: <span className="font-mono font-bold">{contentBoxSize.width?.toFixed(0) ?? '—'}px</span></p>
+            <p>Height: <span className="font-mono font-bold">{contentBoxSize.height?.toFixed(0) ?? '—'}px</span></p>
+            <p className="text-muted-foreground text-xs mt-2">Measures content area (excludes padding/border)</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Border Box Measurement</h2>
+        <div
+          ref={borderBoxRef}
+          className="resize overflow-auto border-4 border-secondary p-8 rounded-md bg-muted min-h-[150px] min-w-[200px]"
+        >
+          <p className="text-sm font-medium mb-2">Resize this container (drag bottom-right corner)</p>
+          <div className="space-y-1 text-sm">
+            <p>Width: <span className="font-mono font-bold">{borderBoxSize.width?.toFixed(0) ?? '—'}px</span></p>
+            <p>Height: <span className="font-mono font-bold">{borderBoxSize.height?.toFixed(0) ?? '—'}px</span></p>
+            <p className="text-muted-foreground text-xs mt-2">Measures total size (includes padding/border)</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseScriptDemo() {
+  const [loadScript, setLoadScript] = useState(false)
+  const scriptStatus = useScript(
+    loadScript ? 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js' : null
+  )
+
+  const [loadErrorScript, setLoadErrorScript] = useState(false)
+  const errorScriptStatus = useScript(
+    loadErrorScript ? 'https://invalid-url-that-will-fail.com/script.js' : null
+  )
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Successful Script Load</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Script Status:</p>
+            <div className="flex items-center gap-2">
+              <div
+                className={cn(
+                  'size-3 rounded-full',
+                  scriptStatus === 'idle' && 'bg-gray-400',
+                  scriptStatus === 'loading' && 'bg-blue-500 animate-pulse',
+                  scriptStatus === 'ready' && 'bg-green-500',
+                  scriptStatus === 'error' && 'bg-red-500'
+                )}
+              />
+              <span className="text-lg font-mono font-bold capitalize">{scriptStatus}</span>
+            </div>
+          </div>
+          <button
+            onClick={() => setLoadScript(!loadScript)}
+            disabled={scriptStatus === 'loading'}
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none"
+          >
+            {loadScript ? 'Script Loaded' : 'Load Lodash Script'}
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Failed Script Load</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Script Status:</p>
+            <div className="flex items-center gap-2">
+              <div
+                className={cn(
+                  'size-3 rounded-full',
+                  errorScriptStatus === 'idle' && 'bg-gray-400',
+                  errorScriptStatus === 'loading' && 'bg-blue-500 animate-pulse',
+                  errorScriptStatus === 'ready' && 'bg-green-500',
+                  errorScriptStatus === 'error' && 'bg-red-500'
+                )}
+              />
+              <span className="text-lg font-mono font-bold capitalize">{errorScriptStatus}</span>
+            </div>
+          </div>
+          <button
+            onClick={() => setLoadErrorScript(!loadErrorScript)}
+            disabled={errorScriptStatus === 'loading'}
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none"
+          >
+            {loadErrorScript ? 'Script Failed' : 'Load Invalid Script'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+export function UseScreenDemo() {
+  const screen = useScreen()
+  const debouncedScreen = useScreen({ debounceDelay: 300 })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Screen Properties (Immediate)</h2>
+        <div className="grid grid-cols-2 gap-4 p-4 border rounded-md bg-muted/50">
+          <div>
+            <p className="text-sm text-muted-foreground">Width</p>
+            <p className="text-lg font-mono font-bold">{screen?.width}px</p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Height</p>
+            <p className="text-lg font-mono font-bold">{screen?.height}px</p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Available Width</p>
+            <p className="text-lg font-mono font-bold">{screen?.availWidth}px</p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Available Height</p>
+            <p className="text-lg font-mono font-bold">{screen?.availHeight}px</p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Color Depth</p>
+            <p className="text-lg font-mono font-bold">{screen?.colorDepth} bits</p>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground">Pixel Depth</p>
+            <p className="text-lg font-mono font-bold">{screen?.pixelDepth} bits</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Orientation (Debounced 300ms)</h2>
+        <div className="p-4 border rounded-md bg-muted/50">
+          {debouncedScreen?.orientation ? (
+            <div className="space-y-2">
+              <div>
+                <p className="text-sm text-muted-foreground">Type</p>
+                <p className="text-lg font-mono font-bold">{debouncedScreen.orientation.type}</p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Angle</p>
+                <p className="text-lg font-mono font-bold">{debouncedScreen.orientation.angle}°</p>
+              </div>
+            </div>
+          ) : (
+            <p className="text-muted-foreground">Orientation API not supported</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseScrollLockDemo() {
+  const [showModal, setShowModal] = useState(false)
+  const { isLocked: manualLocked, lock, unlock } = useScrollLock({ autoLock: false })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Manual Scroll Lock</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-md bg-muted/50">
+            <p className="text-sm font-medium mb-2">Scroll Status:</p>
+            <div className="flex items-center gap-2">
+              <div
+                className={cn(
+                  'size-3 rounded-full',
+                  manualLocked ? 'bg-red-500' : 'bg-green-500'
+                )}
+              />
+              <span className="text-lg font-mono font-bold">
+                {manualLocked ? 'Locked' : 'Unlocked'}
+              </span>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={lock}
+              disabled={manualLocked}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none"
+            >
+              Lock Scroll
+            </button>
+            <button
+              onClick={unlock}
+              disabled={!manualLocked}
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+            >
+              Unlock Scroll
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Auto Lock with Modal</h2>
+        <button
+          onClick={() => setShowModal(true)}
+          className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        >
+          Open Modal
+        </button>
+
+        {showModal && <ModalWithAutoLock onClose={() => setShowModal(false)} />}
+      </div>
+
+      <div className="mt-12 space-y-4">
+        <p className="text-muted-foreground">
+          Scroll down to see more content. Try locking scroll manually or opening the modal to see
+          the effect.
+        </p>
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} className="p-4 border rounded-md bg-muted/30">
+            <p className="text-sm">Content block {i + 1}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ModalWithAutoLock({ onClose }: { onClose: () => void }) {
+  useScrollLock({ autoLock: true })
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-background border rounded-lg p-6 max-w-md w-full shadow-lg">
+        <h3 className="text-lg font-semibold mb-2">Modal with Auto Lock</h3>
+        <p className="text-muted-foreground mb-4">
+          This modal automatically locks scroll when mounted and unlocks when closed. The background
+          should not be scrollable.
+        </p>
+        <button
+          onClick={onClose}
+          className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        >
+          Close Modal
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function UseOnClickOutsideDemo() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const modalRef = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const dropdownButtonRef = useRef<HTMLButtonElement>(null)
+
+  useOnClickOutside(modalRef, () => {
+    if (isOpen) {
+      setIsOpen(false)
+    }
+  })
+
+  useOnClickOutside([dropdownRef, dropdownButtonRef], () => {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false)
+    }
+  })
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Modal Dialog</h2>
+        <button
+          onClick={() => setIsOpen(true)}
+          className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+        >
+          Open Modal
+        </button>
+
+        {isOpen && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+            <div
+              ref={modalRef}
+              className="bg-background border rounded-lg p-6 max-w-md w-full shadow-lg"
+            >
+              <h3 className="text-lg font-semibold mb-2">Modal Title</h3>
+              <p className="text-muted-foreground mb-4">
+                Click outside this modal to close it. The hook detects clicks outside the modal container.
+              </p>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Dropdown Menu (Multiple Refs)</h2>
+        <div className="relative inline-block">
+          <button
+            ref={dropdownButtonRef}
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground"
+          >
+            Toggle Dropdown
+          </button>
+
+          {isDropdownOpen && (
+            <div
+              ref={dropdownRef}
+              className="absolute top-full left-0 mt-2 w-48 bg-background border rounded-md shadow-lg z-10"
+            >
+              <div className="p-1">
+                <button className="w-full text-left px-3 py-2 text-sm rounded hover:bg-accent hover:text-accent-foreground">
+                  Option 1
+                </button>
+                <button className="w-full text-left px-3 py-2 text-sm rounded hover:bg-accent hover:text-accent-foreground">
+                  Option 2
+                </button>
+                <button className="w-full text-left px-3 py-2 text-sm rounded hover:bg-accent hover:text-accent-foreground">
+                  Option 3
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+// Sample components for demo
+function FeatureCard({ title, description, icon, direction = 'top', delay = 0 }) {
+  const [ref, isVisible, animationClasses] = useSlideInV1(direction, 0.15, '0px 0px -50px 0px', 500, delay);
+
+  return (
+    <div
+      ref={ref}
+      className={`bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg ${animationClasses}`}
+    >
+      <div className="text-3xl mb-4">{icon}</div>
+      <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">{title}</h3>
+      <p className="text-gray-600 dark:text-gray-300">{description}</p>
+    </div>
+  );
+}
+
+function DirectionalGrid({ items, title, directions = ['top', 'top', 'top'] }) {
+  return (
+    <div className="text-center mb-16">
+      <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">{title}</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        {items.map((item, index) => (
+          <FeatureCard
+            key={index}
+            {...item}
+            direction={directions[index]}
+            delay={index * 100}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function DirectionalAnimationsDemo() {
+  // Different sections with various animation directions
+  const [heroRef, heroVisible, heroClasses] = useSlideInV1('scale', 0.1);
+  const [section1Ref, section1Visible, section1Classes] = useSlideInV1('bottom', 0.15);
+  const [section2Ref, section2Visible, section2Classes] = useSlideInV1('left', 0.15);
+  const [section3Ref, section3Visible, section3Classes] = useSlideInV1('right', 0.15);
+  const [ctaRef, ctaVisible, ctaClasses] = useSlideInV1('fade', 0.15, '0px 0px -100px 0px', 800);
+
+  const features = [
+    { title: "Fast Performance", description: "Lightning-fast loading and smooth interactions", icon: "⚡" },
+    { title: "Secure by Default", description: "Enterprise-grade security built-in", icon: "🔒" },
+    { title: "Easy Integration", description: "Simple APIs and documentation", icon: "🔧" }
+  ];
+
+  const services = [
+    { title: "Cloud Storage", description: "Scalable storage solutions", icon: "☁️" },
+    { title: "Analytics", description: "Deep insights and reporting", icon: "📊" },
+    { title: "Support", description: "24/7 customer support", icon: "💬" }
+  ];
+
+  const benefits = [
+    { title: "Cost Effective", description: "Reduce operational costs", icon: "💰" },
+    { title: "Reliable", description: "99.9% uptime guaranteed", icon: "✅" },
+    { title: "Scalable", description: "Grow with your business", icon: "📈" }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+
+      {/* Hero Section - Scale Animation */}
+      <section className="py-20 px-6">
+        <div ref={heroRef} className={`max-w-4xl mx-auto text-center ${heroClasses}`}>
+          <h1 className="text-5xl font-bold mb-6 text-gray-900 dark:text-white">
+            Directional Slide Animations
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
+            Scroll down to see animations from different directions
+          </p>
+          <div className="flex justify-center gap-4 flex-wrap text-sm">
+            <span className="bg-blue-100 dark:bg-blue-900 px-3 py-1 rounded-full">↑ From Top</span>
+            <span className="bg-green-100 dark:bg-green-900 px-3 py-1 rounded-full">↓ From Bottom</span>
+            <span className="bg-purple-100 dark:bg-purple-900 px-3 py-1 rounded-full">← From Left</span>
+            <span className="bg-orange-100 dark:bg-orange-900 px-3 py-1 rounded-full">→ From Right</span>
+            <span className="bg-pink-100 dark:bg-pink-900 px-3 py-1 rounded-full">⚡ Scale & Fade</span>
+          </div>
+        </div>
+      </section>
+
+      <div className="max-w-6xl mx-auto px-6">
+
+        {/* Section 1 - Slides from Bottom */}
+        <section ref={section1Ref} className={section1Classes}>
+          <DirectionalGrid
+            items={features}
+            title="Features (From Bottom ↓)"
+            directions={['bottom', 'bottom', 'bottom']}
+          />
+        </section>
+
+        {/* Section 2 - Slides from Left */}
+        <section ref={section2Ref} className={section2Classes}>
+          <DirectionalGrid
+            items={services}
+            title="Services (From Left ←)"
+            directions={['left', 'left', 'left']}
+          />
+        </section>
+
+        {/* Section 3 - Slides from Right */}
+        <section ref={section3Ref} className={section3Classes}>
+          <DirectionalGrid
+            items={benefits}
+            title="Benefits (From Right →)"
+            directions={['right', 'right', 'right']}
+          />
+        </section>
+
+        {/* Mixed Directions Demo */}
+        <section className="mb-16">
+          <h2 className="text-3xl font-bold mb-4 text-center text-gray-900 dark:text-white">
+            Mixed Directions Demo
+          </h2>
+          <DirectionalGrid
+            items={[
+              { title: "Top-Left", description: "Slides from top-left corner", icon: "↖️" },
+              { title: "Scale Up", description: "Scales from center", icon: "🎯" },
+              { title: "Top-Right", description: "Slides from top-right corner", icon: "↗️" }
+            ]}
+            directions={['top-left', 'scale', 'top-right']}
+          />
+        </section>
+
+      </div>
+
+      {/* CTA Section - Fade Animation */}
+      <section className="py-20 px-6">
+        <div ref={ctaRef} className={`max-w-4xl mx-auto text-center ${ctaClasses}`}>
+          <h2 className="text-4xl font-bold mb-6 text-gray-900 dark:text-white">
+            Ready to Get Started?
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
+            This section fades in smoothly
+          </p>
+          <button className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-200 transform hover:scale-105">
+            Start Free Trial
+          </button>
+        </div>
+      </section>
+
+      {/* Usage Examples */}
+      <section className="py-16 px-6 bg-white/50 dark:bg-gray-800/50">
+        <div className="max-w-4xl mx-auto">
+          <h3 className="text-2xl font-bold mb-6 text-center text-gray-900 dark:text-white">
+            Usage Examples
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
+            <div className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
+              <h4 className="font-semibold mb-2">Basic Usage:</h4>
+              <code className="text-blue-600">
+                {`const [ref, isVisible, classes] = useSlideInV1('top');`}
+              </code>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
+              <h4 className="font-semibold mb-2">With Custom Settings:</h4>
+              <code className="text-blue-600">
+                {`useSlideInV1('left', 0.2, '0px', 800, 200);`}
+              </code>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
+              <h4 className="font-semibold mb-2">Available Directions:</h4>
+              <code className="text-green-600">
+                'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'scale', 'fade'
+              </code>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
+              <h4 className="font-semibold mb-2">In Component:</h4>
+              <code className="text-purple-600">
+                {`<div ref={ref} className={classes}>Content</div>`}
+              </code>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div className="h-32"></div>
+    </div>
+  );
+}
+
+export function UseSecFetchParserDemo() {
+  const { parseFromHeadersObject, validateSecFetch } = useSecFetchParser()
+  const [validationResult, setValidationResult] = useState<string>("")
+
+  const mockHeaders = {
+    "sec-fetch-dest": "document",
+    "sec-fetch-mode": "navigate",
+    "sec-fetch-site": "same-origin",
+    "sec-fetch-user": "?1"
+  }
+
+  const handleValidate = () => {
+    const secFetchData = parseFromHeadersObject(mockHeaders)
+    if (secFetchData) {
+      const isValid = validateSecFetch(secFetchData)
+      setValidationResult(isValid ? "Valid Sec-Fetch headers" : "Invalid Sec-Fetch headers")
+    } else {
+      setValidationResult("No Sec-Fetch headers found")
+    }
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Sec-Fetch Parser Hook</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-lg bg-background">
+            <p className="font-medium mb-2">Mock Headers:</p>
+            <pre className="text-sm bg-muted p-2 rounded">
+              {JSON.stringify(mockHeaders, null, 2)}
+            </pre>
+          </div>
+
+          <button
+            onClick={handleValidate}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
+          >
+            Validate Sec-Fetch Headers
+          </button>
+
+          {validationResult && (
+            <div className="p-4 border rounded-lg bg-background">
+              <p className="font-medium">Validation Result:</p>
+              <p className={validationResult.includes("Valid") ? "text-green-600" : "text-red-600"}>
+                {validationResult}
+              </p>
+            </div>
+          )}
+
+          <div className="p-4 border rounded-lg bg-background">
+            <p className="font-medium mb-2">Usage Information:</p>
+            <p className="text-sm text-muted-foreground">
+              This hook parses and validates Sec-Fetch headers for security purposes.
+              Use it in your Remix loaders and actions to verify request origins.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseTimerDemo() {
+  const [count, setCount] = useState(0)
+  const [log, setLog] = useState<string[]>([])
+
+  const { start, stop, reset, isRunning } = useTimer({
+    interval: 1000,
+    callback: () => {
+      setCount(prev => prev + 1)
+      setLog(prev => [...prev, `Tick at ${new Date().toLocaleTimeString()}`])
+    },
+    immediate: true
+  })
+
+  const handleReset = () => {
+    setCount(0)
+    setLog([])
+    reset()
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Timer Hook</h2>
+        <div className="space-y-4">
+          <div className="p-4 border rounded-lg bg-background">
+            <p className="font-medium">Count: {count}</p>
+            <p className={isRunning ? "text-green-600" : "text-red-600"}>
+              Status: {isRunning ? "Running" : "Stopped"}
+            </p>
+          </div>
+
+          <div className="flex gap-2 flex-wrap">
+            <button
+              onClick={start}
+              disabled={isRunning}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+            >
+              Start
+            </button>
+            <button
+              onClick={stop}
+              disabled={!isRunning}
+              className="px-4 py-2 bg-secondary text-secondary-foreground rounded-md disabled:opacity-50"
+            >
+              Stop
+            </button>
+            <button
+              onClick={handleReset}
+              className="px-4 py-2 bg-destructive text-destructive-foreground rounded-md"
+            >
+              Reset
+            </button>
+          </div>
+
+          <div className="p-4 border rounded-lg bg-background">
+            <p className="font-medium mb-2">Activity Log:</p>
+            <div className="max-h-32 overflow-y-auto text-sm">
+              {log.length > 0 ? (
+                log.map((entry, index) => (
+                  <div key={index} className="py-1 border-b last:border-b-0">
+                    {entry}
+                  </div>
+                ))
+              ) : (
+                <p className="text-muted-foreground">No activity yet</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UseBreakpointDemo() {
+  const isMobile = useBreakpoint(768)
+  const isTablet = useBreakpoint(1024)
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Breakpoint Detection</h2>
+        <div className="grid gap-4">
+          <div className="p-4 border rounded-lg bg-background">
+            <p className="font-medium">Mobile (below 768px):</p>
+            <p className={isMobile ? "text-green-600" : "text-red-600"}>
+              {isMobile ? "Active" : "Inactive"}
+            </p>
+          </div>
+          <div className="p-4 border rounded-lg bg-background">
+            <p className="font-medium">Tablet (below 1024px):</p>
+            <p className={isTablet ? "text-green-600" : "text-red-600"}>
+              {isTablet ? "Active" : "Inactive"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+export function UseFocusWithinDemo() {
+  const { focusWithinProps, ref } = useFocusWithin({
+    onFocusWithin: () => console.log('Focus within container'),
+    onBlurWithin: () => console.log('Blur within container')
+  });
+
+  return (
+    <Card ref={ref} {...focusWithinProps} className="p-4">
+      <h3 className="font-semibold mb-2">useFocusWithin</h3>
+      <p>Focus on any element inside this card</p>
+      <Button className="mt-2">Button 1</Button>
+      <Button className="mt-2 ml-2">Button 2</Button>
+    </Card>
+  );
+}
+export function UseFocusDemo() {
+  const { focusProps, isFocused, ref } = useFocus({
+    onFocus: () => console.log('Focused'),
+    onBlur: () => console.log('Blurred')
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useFocus</h3>
+      <Button
+        ref={ref}
+        {...focusProps}
+        variant={isFocused ? 'default' : 'outline'}
+      >
+        {isFocused ? 'Focused' : 'Focus me'}
+      </Button>
+    </Card>
+  );
+}
+export function UsePressDemo() {
+  const [counter, setCounter] = useState(0);
+  const { pressProps, isPressed, ref } = usePress({
+    onPress: () => setCounter(c => c + 1)
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">usePress</h3>
+      <Button
+        ref={ref}
+        {...pressProps}
+        variant={isPressed ? 'default' : 'outline'}
+      >
+        Press me: {counter}
+      </Button>
+    </Card>
+  );
+}
+export function UseLongPressDemo() {
+  const { longPressProps, ref } = useLongPress({
+    onLongPress: () => console.log('Long pressed!')
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useLongPress</h3>
+      <Button
+        ref={ref}
+        {...longPressProps}
+        variant="outline"
+      >
+        Long press me
+      </Button>
+    </Card>
+  );
+}
+export function UseKeyboardDemo() {
+  const { keyboardProps, ref } = useKeyboard({
+    onKeyDown: (e) => console.log(`Key pressed: ${e.key}`)
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useKeyboard</h3>
+      <div
+        ref={ref}
+        {...keyboardProps}
+        tabIndex={0}
+        className="p-4 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+      >
+        Press any key while focused
+      </div>
+    </Card>
+  );
+}
+export function UseHoverDemo() {
+  const { hoverProps, isHovered, ref } = useHover({});
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useHover</h3>
+      <div
+        ref={ref}
+        {...hoverProps}
+        className={`p-4 border rounded-md transition-colors ${isHovered ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
+      >
+        Hover over me
+      </div>
+    </Card>
+  );
+}
+export function UseMoveDemo() {
+  const { moveProps, ref } = useMove({
+    onMove: (e) => console.log(`Moved: ${e.deltaX}, ${e.deltaY}`)
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useMove</h3>
+      <div
+        ref={ref}
+        {...moveProps}
+        className="p-4 border rounded-md bg-muted h-24 flex items-center justify-center"
+      >
+        Click and drag inside this area
+      </div>
+    </Card>
+  );
+}
+export function UseOverlayListenerDemo() {
+  const [isOpen, setIsOpen] = useState(false);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useOverlayListener(overlayRef, (e) => {
+    console.log(`Overlay event: ${e.type}`);
+    if (e.type === 'outsidePress') setIsOpen(false);
+  }, isOpen);
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useOverlayListener</h3>
+      <Button onClick={() => setIsOpen(true)}>
+        Open overlay
+      </Button>
+      {isOpen && (
+        <div ref={overlayRef} className="fixed inset-0 bg-black/50 flex items-center justify-center">
+          <Card className="p-6">
+            <h3 className="font-semibold mb-4">Overlay Content</h3>
+            <p className="mb-4">Click outside or press Escape to close</p>
+            <Button onClick={() => setIsOpen(false)}>
+              Close
+            </Button>
+          </Card>
+        </div>
+      )}
+    </Card>
+  );
+}
+export function UsePreviousDemo() {
+  const [counter, setCounter] = useState(0);
+  const prevCounter = usePrevious(counter);
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">usePrevious</h3>
+      <p>Previous value: {prevCounter}</p>
+      <p>Current value: {counter}</p>
+      <Button onClick={() => setCounter(c => c + 1)} className="mt-2">
+        Increment
+      </Button>
+    </Card>
+  );
+}
+export function UseFaviconDemo() {
+  const [favicon, setFavicon] = useState('/favicon.ico');
+  useFavicon(favicon);
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useFavicon</h3>
+      <div className="flex gap-2">
+        <Button onClick={() => setFavicon('/favicon.ico')}>
+          Default Favicon
+        </Button>
+        <Button onClick={() => setFavicon('/favicon-alt.ico')}>
+          Alternate Favicon
+        </Button>
+      </div>
+    </Card>
+  );
+}
+export function UseMountEffectDemo() {
+  useMountEffect(() => {
+    console.log('Component mounted');
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useMountEffect</h3>
+      <p>Check console for mount message</p>
+    </Card>
+  );
+}
+export function UseUpdateEffectDemo() {
+  const [counter, setCounter] = useState(0);
+  const prevCounter = usePrevious(counter);
+
+  useUpdateEffect(() => {
+    console.log(`Counter updated from ${prevCounter} to ${counter}`);
+  }, [counter]);
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useUpdateEffect</h3>
+      <p>Counter: {counter}</p>
+      <Button onClick={() => setCounter(c => c + 1)} className="mt-2">
+        Increment
+      </Button>
+    </Card>
+  );
+}
+export function UseUnmountEffectDemo() {
+  useUnmountEffect(() => {
+    console.log('Component will unmount');
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useUnmountEffect</h3>
+      <p>Check console for unmount message when component is removed</p>
+    </Card>
+  );
+}
+export function UseEventListenerDemo() {
+  useEventListener('resize', () => {
+    console.log('Window resized');
+  });
+
+  return (
+    <Card className="p-4">
+      <h3 className="font-semibold mb-2">useEventListener</h3>
+      <p>Check console for resize events</p>
+    </Card>
+  );
+}
+
+export function HooksDemo() {
+  return (
+    <div className="p-6 space-y-6 bg-background text-foreground">
+      <Card>
+        <CardHeader>
+          <CardTitle>React Aria Hooks Demo</CardTitle>
+          <CardDescription>
+            Demonstration of various React Aria hooks with proper TypeScript support
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UseFocusWithinDemo />
+            <UseFocusDemo />
+            <UsePressDemo />
+            <UseLongPressDemo />
+            <UseKeyboardDemo />
+            <UseHoverDemo />
+            <UseMoveDemo />
+            <UseOverlayListenerDemo />
+            <UsePreviousDemo />
+            <UseFaviconDemo />
+            <UseMountEffectDemo />
+            <UseUpdateEffectDemo />
+            <UseUnmountEffectDemo />
+            <UseEventListenerDemo />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+export function UseHydratedDemo() {
+  const hydrated = useHydrated();
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useHydrated</h3>
+      <button
+        type="button"
+        disabled={!hydrated}
+        className="bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-300"
+      >
+        {hydrated ? "JS Loaded - Click me" : "Loading JS..."}
+      </button>
+      <p className="text-sm text-gray-600 mt-2">
+        Hydration status: {hydrated ? "Hydrated" : "Not hydrated"}
+      </p>
+    </div>
+  );
+}
+export function UseResizeListenerDemo() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useResizeListener(ref, (entries) => {
+    const entry = entries[0];
+    setSize({
+      width: Math.round(entry.contentRect.width),
+      height: Math.round(entry.contentRect.height)
+    });
+  });
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useResizeListener</h3>
+      <div
+        ref={ref}
+        className="border-2 border-dashed border-gray-300 p-4 resize overflow-auto max-w-full"
+        style={{ width: '300px', height: '200px' }}
+      >
+        <p>Resize this element</p>
+        <p className="text-sm mt-2">
+          Width: {size.width}px<br />
+          Height: {size.height}px
+        </p>
+      </div>
+    </div>
+  );
+}
+export function UseCopyToClipboardDemo() {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
+  const [text, setText] = useState('Copy this text!');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useCopyToClipboard</h3>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        className="border p-2 rounded mb-2 w-full"
+      />
+      <button
+        onClick={() => copyToClipboard(text)}
+        className={`px-4 py-2 rounded ${isCopied ? 'bg-green-500 text-white' : 'bg-blue-500 text-white'
+          }`}
+      >
+        {isCopied ? 'Copied!' : 'Copy to Clipboard'}
+      </button>
+    </div>
+  );
+}
+export function UseIsMobileDemo() {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useIsMobile</h3>
+      <div className={isMobile ? "bg-blue-100 p-4 rounded" : "bg-green-100 p-6 rounded"}>
+        <h4 className="text-lg font-semibold mb-2">
+          {isMobile ? "Mobile View" : "Desktop View"}
+        </h4>
+        <p className="text-sm">
+          {isMobile
+            ? "This layout is optimized for mobile devices."
+            : "This layout is optimized for desktop screens."
+          }
+        </p>
+        <div className={`mt-3 ${isMobile ? 'block' : 'flex gap-2'}`}>
+          <button className={`${isMobile ? 'w-full' : ''} bg-blue-500 text-white px-4 py-2 rounded`}>
+            Primary Action
+          </button>
+          {!isMobile && (
+            <button className="border border-blue-500 text-blue-500 px-4 py-2 rounded">
+              Secondary Action
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+export function UseMountedDemo() {
+  const mounted = useMounted();
+
+  if (!mounted) {
+    return (
+      <div className="p-4 border rounded-lg bg-gray-100 animate-pulse">
+        <div className="h-6 bg-gray-300 rounded w-1/2 mb-4"></div>
+        <div className="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
+        <div className="h-4 bg-gray-300 rounded w-2/3"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 border rounded-lg bg-white">
+      <h3 className="font-semibold mb-2">useMounted</h3>
+      <p className="text-sm mb-2">Viewport width: {window.innerWidth}px</p>
+      <p className="text-sm">User agent detected</p>
+    </div>
+  );
+}
+// new
+export function UseExportDemo() {
+  const exportFile = useExport();
+  const [content, setContent] = useState('// Your code here\nexport function demo() {\n  return "Hello World!";\n}');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useExport</h3>
+      <textarea
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        className="w-full h-32 p-2 border rounded mb-2 font-mono text-sm"
+      />
+      <button
+        onClick={() => exportFile(content, 'demo.tsx')}
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+      >
+        Export as TSX
+      </button>
+    </div>
+  );
+}
+export function UseFuzzySearchDemo() {
+  const items = [
+    { id: 1, name: 'Apple', category: 'Fruit' },
+    { id: 2, name: 'Banana', category: 'Fruit' },
+    { id: 3, name: 'Carrot', category: 'Vegetable' },
+    { id: 4, name: 'Broccoli', category: 'Vegetable' },
+  ];
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const results = useFuzzySearch(items, searchTerm, {
+    keys: ['name', 'category'],
+    threshold: 0.3,
+  });
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useFuzzySearch</h3>
+      <input
+        type="text"
+        placeholder="Search items..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className="w-full p-2 border rounded mb-2"
+      />
+      <div className="space-y-1">
+        {results.map(item => (
+          <div key={item.id} className="p-2 bg-gray-100 rounded">
+            {item.name} - {item.category}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+export function UseFuseSearchDemo() {
+  const books = [
+    { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
+    { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
+    { title: '1984', author: 'George Orwell', year: 1949 },
+    { title: 'Pride and Prejudice', author: 'Jane Austen', year: 1813 },
+  ];
+
+  const { query, results, search, isSearching } = useFuseSearch(books, {
+    keys: ['title', 'author'],
+    threshold: 0.3,
+  });
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useFuseSearch</h3>
+      <input
+        type="text"
+        placeholder="Search books..."
+        value={query}
+        onChange={(e) => search(e.target.value)}
+        className="w-full p-2 border rounded mb-2"
+      />
+      <div className="space-y-1">
+        {results.map((result, index) => (
+          <div key={index} className="p-2 bg-gray-100 rounded">
+            {result.item.title} by {result.item.author} ({result.item.year})
+          </div>
+        ))}
+        {isSearching && results.length === 0 && (
+          <p className="text-gray-500">No results found</p>
+        )}
+      </div>
+    </div>
+  );
+}
+export function UseDebouncedFuseSearchDemo() {
+  const movies = [
+    { title: 'The Shawshank Redemption', year: 1994, genre: 'Drama' },
+    { title: 'The Godfather', year: 1972, genre: 'Crime' },
+    { title: 'The Dark Knight', year: 2008, genre: 'Action' },
+    { title: 'Pulp Fiction', year: 1994, genre: 'Crime' },
+  ];
+
+  const { query, results, search, isSearching } = useDebouncedFuseSearch(movies, {
+    keys: ['title', 'genre'],
+    threshold: 0.3,
+  }, 500);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useDebouncedFuseSearch</h3>
+      <input
+        type="text"
+        placeholder="Search movies (debounced 500ms)..."
+        value={query}
+        onChange={(e) => search(e.target.value)}
+        className="w-full p-2 border rounded mb-2"
+      />
+      {isSearching && <p className="text-gray-500">Searching...</p>}
+      <div className="space-y-1">
+        {results.map((result, index) => (
+          <div key={index} className="p-2 bg-gray-100 rounded">
+            {result.item.title} ({result.item.year}) - {result.item.genre}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+export function UseMediaQueryDemo() {
+  const isLargeScreen = useMediaQuery('(min-width: 1024px)');
+  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useMediaQuery</h3>
+      <div className="space-y-2">
+        <p>Large screen (≥1024px): {isLargeScreen ? 'Yes' : 'No'}</p>
+        <p>Dark mode preferred: {isDarkMode ? 'Yes' : 'No'}</p>
+      </div>
+    </div>
+  );
+}
+export function UseLocalStorageDemo() {
+  const [value, setValue] = useLocalStorage('demo-key', 'default value');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useLocalStorage</h3>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="w-full p-2 border rounded mb-2"
+      />
+      <p className="text-sm text-gray-600">Value persists across page refreshes</p>
+    </div>
+  );
+}
+export function UseSessionStorageDemo() {
+  const [value, setValue] = useSessionStorage('session-demo', 'session value');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useSessionStorage</h3>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="w-full p-2 border rounded mb-2"
+      />
+      <p className="text-sm text-gray-600">Value persists for this browser session</p>
+    </div>
+  );
+}
+export function UseDebounceDemo() {
+  const [value, setValue] = useState('');
+  const debouncedValue = useDebounce(value, 500);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useDebounce</h3>
+      <input
+        type="text"
+        placeholder="Type quickly..."
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="w-full p-2 border rounded mb-2"
+      />
+      <p>Real-time: {value}</p>
+      <p>Debounced (500ms): {debouncedValue}</p>
+    </div>
+  );
+}
+export function UseThrottleDemo() {
+  const [value, setValue] = useState(0);
+  const throttledValue = useThrottle(value, 1000);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useThrottle</h3>
+      <button
+        onClick={() => setValue(v => v + 1)}
+        className="bg-blue-500 text-white px-4 py-2 rounded mb-2"
+      >
+        Increment (throttled 1s)
+      </button>
+      <p>Clicks: {value}</p>
+      <p>Throttled: {throttledValue}</p>
+    </div>
+  );
+}
+export function UseToggleDemo() {
+  const [isOn, toggle, turnOn, turnOff] = useToggle(false);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useToggle</h3>
+      <div className="space-x-2 mb-2">
+        <button onClick={toggle} className="bg-blue-500 text-white px-3 py-1 rounded">
+          Toggle
+        </button>
+        <button onClick={turnOn} className="bg-green-500 text-white px-3 py-1 rounded">
+          Turn On
+        </button>
+        <button onClick={turnOff} className="bg-red-500 text-white px-3 py-1 rounded">
+          Turn Off
+        </button>
+      </div>
+      <p>Status: {isOn ? 'ON' : 'OFF'}</p>
+    </div>
+  );
+}
+export function UseCounterDemo() {
+  const { count, increment, decrement, reset } = useCounter(0, 1);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useCounter</h3>
+      <div className="space-x-2 mb-2">
+        <button onClick={decrement} className="bg-red-500 text-white px-3 py-1 rounded">
+          -
+        </button>
+        <span className="text-xl font-bold">{count}</span>
+        <button onClick={increment} className="bg-green-500 text-white px-3 py-1 rounded">
+          +
+        </button>
+        <button onClick={reset} className="bg-gray-500 text-white px-3 py-1 rounded">
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}
+export function UseIntervalDemo() {
+  const [count, setCount] = useState(0);
+
+  useInterval(() => {
+    setCount(c => c + 1);
+  }, 1000);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useInterval</h3>
+      <p>Counting every second: {count}</p>
+    </div>
+  );
+}
+export function UseTimeoutDemo() {
+  const [message, setMessage] = useState('Waiting...');
+
+  useTimeout(() => {
+    setMessage('Timeout completed after 3 seconds!');
+  }, 3000);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useTimeout</h3>
+      <p>{message}</p>
+    </div>
+  );
+}
+export function UseClickOutsideDemo() {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useClickOutside</h3>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="bg-blue-500 text-white px-4 py-2 rounded mb-2"
+      >
+        Open Menu
+      </button>
+      {isOpen && (
+        <div ref={ref} className="absolute bg-white border p-4 rounded shadow-lg">
+          <p>Click outside to close</p>
+          <p>Menu content here</p>
+        </div>
+      )}
+    </div>
+  );
+}
+export function UseKeyPressDemo() {
+  const isEnterPressed = useKeyPress('Enter');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useKeyPress</h3>
+      <p>Press Enter key: {isEnterPressed ? 'Pressed' : 'Not pressed'}</p>
+    </div>
+  );
+}
+export function UseOnlineStatusDemo() {
+  const isOnline = useOnlineStatus();
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useOnlineStatus</h3>
+      <div className="flex items-center gap-2">
+        <div className={`w-3 h-3 rounded-full ${isOnline ? 'bg-green-500' : 'bg-red-500'}`} />
+        <p>{isOnline ? 'Online' : 'Offline'}</p>
+      </div>
+    </div>
+  );
+}
+export function UseWindowSizeDemo() {
+  const { width, height } = useWindowSize();
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useWindowSize</h3>
+      <p>Width: {width}px</p>
+      <p>Height: {height}px</p>
+    </div>
+  );
+}
+export function UseScrollPositionDemo() {
+  const { x, y } = useScrollPosition();
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useScrollPosition</h3>
+      <p>Scroll X: {x}px</p>
+      <p>Scroll Y: {y}px</p>
+    </div>
+  );
+}
+export function UseIntersectionObserverDemo() {
+  const [ref, isIntersecting] = useIntersectionObserver({
+    threshold: 0.5,
+  });
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useIntersectionObserver</h3>
+      <div className="h-96 overflow-y-scroll border">
+        <div className="h-48"></div>
+        <div
+          ref={ref}
+          className={`p-4 border-2 rounded ${isIntersecting ? 'bg-green-100 border-green-500' : 'bg-red-100 border-red-500'
+            }`}
+        >
+          {isIntersecting ? 'Visible (50% in viewport)' : 'Not visible'}
+        </div>
+        <div className="h-48"></div>
+      </div>
+    </div>
+  );
+}
+export function UseAsyncDemo() {
+  const fetchData = async () => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    return { message: 'Data loaded successfully!' };
+  };
+
+  const { execute, status, data, error } = useAsync(fetchData, false);
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useAsync</h3>
+      <button
+        onClick={execute}
+        disabled={status === 'pending'}
+        className="bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-300"
+      >
+        {status === 'pending' ? 'Loading...' : 'Load Data'}
+      </button>
+      {status === 'success' && <p className="text-green-600 mt-2">{data?.message}</p>}
+      {status === 'error' && <p className="text-red-600 mt-2">Error: {error}</p>}
+    </div>
+  );
+}
+export function UseFetchDemo() {
+  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useFetch</h3>
+      {loading && <p>Loading...</p>}
+      {error && <p className="text-red-600">Error: {error.message}</p>}
+      {data && (
+        <pre className="text-sm bg-gray-100 p-2 rounded">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+export function UseFormDemo() {
+  const { values, errors, handleChange, handleSubmit } = useForm({
+    name: '',
+    email: '',
+  }, (values) => {
+    alert(`Form submitted: ${JSON.stringify(values)}`);
+  });
+
+  return (
+    <div className="p-4 border rounded-lg">
+      <h3 className="font-semibold mb-2">useForm</h3>
+      <form onSubmit={handleSubmit} className="space-y-2">
+        <input
+          name="name"
+          value={values.name}
+          onChange={handleChange}
+          placeholder="Name"
+          className="w-full p-2 border rounded"
+        />
+        <input
+          name="email"
+          type="email"
+          value={values.email}
+          onChange={handleChange}
+          placeholder="Email"
+          className="w-full p-2 border rounded"
+        />
+        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}