@sntlr/registry-shell 1.0.0 → 1.1.0

package/src/next-app/components/resizable-preview.tsx

@@ -1,101 +1,101 @@
-"use client"
-
-import { useCallback, useRef, useState, useEffect } from "react"
-
-const STORAGE_KEY = "preview-height"
-const DEFAULT_HEIGHT_DESKTOP = 384
-const DEFAULT_HEIGHT_MOBILE = 600
-const MIN_HEIGHT = 200
-const MAX_HEIGHT = 1000
-
-function getDefaultHeight(): number {
-  if (typeof window === "undefined") return DEFAULT_HEIGHT_DESKTOP
-  return window.matchMedia("(max-width: 767px)").matches
-    ? DEFAULT_HEIGHT_MOBILE
-    : DEFAULT_HEIGHT_DESKTOP
-}
-
-function getStoredHeight(): number {
-  if (typeof window === "undefined") return DEFAULT_HEIGHT_DESKTOP
-  const stored = sessionStorage.getItem(STORAGE_KEY)
-  if (stored) {
-    const n = Number(stored)
-    if (!isNaN(n)) return Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, n))
-  }
-  return getDefaultHeight()
-}
-
-export function ResizablePreview({ children }: { children: React.ReactNode }) {
-  const [height, setHeight] = useState(getStoredHeight)
-  const dragging = useRef(false)
-  const startY = useRef(0)
-  const startH = useRef(0)
-
-  useEffect(() => {
-    sessionStorage.setItem(STORAGE_KEY, String(height))
-  }, [height])
-
-  const onMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    dragging.current = true
-    startY.current = e.clientY
-    startH.current = height
-    document.body.style.cursor = "row-resize"
-    document.body.style.userSelect = "none"
-
-    function onMouseMove(ev: MouseEvent) {
-      if (!dragging.current) return
-      const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startH.current + (ev.clientY - startY.current)))
-      setHeight(newH)
-    }
-
-    function onMouseUp() {
-      dragging.current = false
-      document.body.style.cursor = ""
-      document.body.style.userSelect = ""
-      document.removeEventListener("mousemove", onMouseMove)
-      document.removeEventListener("mouseup", onMouseUp)
-    }
-
-    document.addEventListener("mousemove", onMouseMove)
-    document.addEventListener("mouseup", onMouseUp)
-  }, [height])
-
-  const onTouchStart = useCallback((e: React.TouchEvent) => {
-    if (e.touches.length !== 1) return
-    dragging.current = true
-    startY.current = e.touches[0].clientY
-    startH.current = height
-
-    function onTouchMove(ev: TouchEvent) {
-      if (!dragging.current || ev.touches.length !== 1) return
-      ev.preventDefault()
-      const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startH.current + (ev.touches[0].clientY - startY.current)))
-      setHeight(newH)
-    }
-
-    function onTouchEnd() {
-      dragging.current = false
-      document.removeEventListener("touchmove", onTouchMove)
-      document.removeEventListener("touchend", onTouchEnd)
-    }
-
-    document.addEventListener("touchmove", onTouchMove, { passive: false })
-    document.addEventListener("touchend", onTouchEnd)
-  }, [height])
-
-  return (
-    <div>
-      <div style={{ height }}>
-        {children}
-      </div>
-      <div
-        className="h-3 md:h-2 cursor-row-resize flex items-center justify-center hover:bg-muted/50 active:bg-muted/50 transition-colors group touch-none"
-        onMouseDown={onMouseDown}
-        onTouchStart={onTouchStart}
-      >
-        <div className="w-8 h-0.5 rounded-full bg-border group-hover:bg-muted-foreground transition-colors" />
-      </div>
-    </div>
-  )
-}
+"use client"
+
+import { useCallback, useRef, useState, useEffect } from "react"
+
+const STORAGE_KEY = "preview-height"
+const DEFAULT_HEIGHT_DESKTOP = 384
+const DEFAULT_HEIGHT_MOBILE = 600
+const MIN_HEIGHT = 200
+const MAX_HEIGHT = 1000
+
+function getDefaultHeight(): number {
+  if (typeof window === "undefined") return DEFAULT_HEIGHT_DESKTOP
+  return window.matchMedia("(max-width: 767px)").matches
+    ? DEFAULT_HEIGHT_MOBILE
+    : DEFAULT_HEIGHT_DESKTOP
+}
+
+function getStoredHeight(): number {
+  if (typeof window === "undefined") return DEFAULT_HEIGHT_DESKTOP
+  const stored = sessionStorage.getItem(STORAGE_KEY)
+  if (stored) {
+    const n = Number(stored)
+    if (!isNaN(n)) return Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, n))
+  }
+  return getDefaultHeight()
+}
+
+export function ResizablePreview({ children }: { children: React.ReactNode }) {
+  const [height, setHeight] = useState(getStoredHeight)
+  const dragging = useRef(false)
+  const startY = useRef(0)
+  const startH = useRef(0)
+
+  useEffect(() => {
+    sessionStorage.setItem(STORAGE_KEY, String(height))
+  }, [height])
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    dragging.current = true
+    startY.current = e.clientY
+    startH.current = height
+    document.body.style.cursor = "row-resize"
+    document.body.style.userSelect = "none"
+
+    function onMouseMove(ev: MouseEvent) {
+      if (!dragging.current) return
+      const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startH.current + (ev.clientY - startY.current)))
+      setHeight(newH)
+    }
+
+    function onMouseUp() {
+      dragging.current = false
+      document.body.style.cursor = ""
+      document.body.style.userSelect = ""
+      document.removeEventListener("mousemove", onMouseMove)
+      document.removeEventListener("mouseup", onMouseUp)
+    }
+
+    document.addEventListener("mousemove", onMouseMove)
+    document.addEventListener("mouseup", onMouseUp)
+  }, [height])
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    if (e.touches.length !== 1) return
+    dragging.current = true
+    startY.current = e.touches[0].clientY
+    startH.current = height
+
+    function onTouchMove(ev: TouchEvent) {
+      if (!dragging.current || ev.touches.length !== 1) return
+      ev.preventDefault()
+      const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startH.current + (ev.touches[0].clientY - startY.current)))
+      setHeight(newH)
+    }
+
+    function onTouchEnd() {
+      dragging.current = false
+      document.removeEventListener("touchmove", onTouchMove)
+      document.removeEventListener("touchend", onTouchEnd)
+    }
+
+    document.addEventListener("touchmove", onTouchMove, { passive: false })
+    document.addEventListener("touchend", onTouchEnd)
+  }, [height])
+
+  return (
+    <div>
+      <div style={{ height }}>
+        {children}
+      </div>
+      <div
+        className="h-3 md:h-2 cursor-row-resize flex items-center justify-center hover:bg-muted/50 active:bg-muted/50 transition-colors group touch-none"
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+      >
+        <div className="w-8 h-0.5 rounded-full bg-border group-hover:bg-muted-foreground transition-colors" />
+      </div>
+    </div>
+  )
+}

package/src/next-app/components/sidebar-provider.tsx

@@ -1,75 +1,75 @@
-"use client"
-
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useState, type ReactNode } from "react"
-
-interface SidebarContextValue {
-  open: boolean
-  toggle: () => void
-  close: () => void
-  collapsed: boolean
-  setCollapsed: (v: boolean) => void
-}
-
-const SidebarContext = createContext<SidebarContextValue>({
-  open: false,
-  toggle: () => {},
-  close: () => {},
-  collapsed: false,
-  setCollapsed: () => {},
-})
-
-/**
- * Runs synchronously after DOM commit and *before* paint, so we can swap
- * client-only state into the tree post-hydration without ever rendering a
- * mismatched DOM. On the server it's a no-op alias to `useEffect`.
- */
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
-
-export function SidebarProvider({ children }: { children: ReactNode }) {
-  // Always start with the SSR-safe defaults so the server HTML and the first
-  // client render are identical. Reading from sessionStorage / matchMedia in
-  // a `useState` initializer caused a hydration mismatch on the Header (which
-  // builds className strings from `collapsed`), and React's mismatch recovery
-  // discards the affected subtree — which restarts the bento card CSS
-  // animations on the homepage. We restore the persisted state in a layout
-  // effect that runs before the first paint, so users never see a flash.
-  const [open, setOpen] = useState(false)
-  const [collapsed, setCollapsedState] = useState(false)
-
-  useIsomorphicLayoutEffect(() => {
-    // Sidebar nav: only restore on desktop (mobile always starts closed).
-    const isMobile = window.matchMedia("(max-width: 767px)").matches
-    if (!isMobile) {
-      const storedOpen = sessionStorage.getItem("sidebar-nav-open") === "true"
-      if (storedOpen) setOpen(true)
-    }
-    // Preview fullscreen.
-    const storedCollapsed = sessionStorage.getItem("preview-fullscreen") === "true"
-    if (storedCollapsed) setCollapsedState(true)
-  }, [])
-
-  const toggle = useCallback(() => {
-    setOpen((o) => {
-      sessionStorage.setItem("sidebar-nav-open", String(!o))
-      return !o
-    })
-  }, [])
-  const close = useCallback(() => {
-    setOpen(false)
-    sessionStorage.setItem("sidebar-nav-open", "false")
-  }, [])
-  const setCollapsed = useCallback((v: boolean) => {
-    setCollapsedState(v)
-    sessionStorage.setItem("preview-fullscreen", String(v))
-  }, [])
-
-  return (
-    <SidebarContext.Provider value={{ open, toggle, close, collapsed, setCollapsed }}>
-      {children}
-    </SidebarContext.Provider>
-  )
-}
-
-export function useMobileSidebar() {
-  return useContext(SidebarContext)
-}
+"use client"
+
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useState, type ReactNode } from "react"
+
+interface SidebarContextValue {
+  open: boolean
+  toggle: () => void
+  close: () => void
+  collapsed: boolean
+  setCollapsed: (v: boolean) => void
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  open: false,
+  toggle: () => {},
+  close: () => {},
+  collapsed: false,
+  setCollapsed: () => {},
+})
+
+/**
+ * Runs synchronously after DOM commit and *before* paint, so we can swap
+ * client-only state into the tree post-hydration without ever rendering a
+ * mismatched DOM. On the server it's a no-op alias to `useEffect`.
+ */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  // Always start with the SSR-safe defaults so the server HTML and the first
+  // client render are identical. Reading from sessionStorage / matchMedia in
+  // a `useState` initializer caused a hydration mismatch on the Header (which
+  // builds className strings from `collapsed`), and React's mismatch recovery
+  // discards the affected subtree — which restarts the bento card CSS
+  // animations on the homepage. We restore the persisted state in a layout
+  // effect that runs before the first paint, so users never see a flash.
+  const [open, setOpen] = useState(false)
+  const [collapsed, setCollapsedState] = useState(false)
+
+  useIsomorphicLayoutEffect(() => {
+    // Sidebar nav: only restore on desktop (mobile always starts closed).
+    const isMobile = window.matchMedia("(max-width: 767px)").matches
+    if (!isMobile) {
+      const storedOpen = sessionStorage.getItem("sidebar-nav-open") === "true"
+      if (storedOpen) setOpen(true)
+    }
+    // Preview fullscreen.
+    const storedCollapsed = sessionStorage.getItem("preview-fullscreen") === "true"
+    if (storedCollapsed) setCollapsedState(true)
+  }, [])
+
+  const toggle = useCallback(() => {
+    setOpen((o) => {
+      sessionStorage.setItem("sidebar-nav-open", String(!o))
+      return !o
+    })
+  }, [])
+  const close = useCallback(() => {
+    setOpen(false)
+    sessionStorage.setItem("sidebar-nav-open", "false")
+  }, [])
+  const setCollapsed = useCallback((v: boolean) => {
+    setCollapsedState(v)
+    sessionStorage.setItem("preview-fullscreen", String(v))
+  }, [])
+
+  return (
+    <SidebarContext.Provider value={{ open, toggle, close, collapsed, setCollapsed }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export function useMobileSidebar() {
+  return useContext(SidebarContext)
+}

package/src/next-app/hooks/use-controls.ts

@@ -1,72 +1,72 @@
-"use client"
-
-import { useState } from "react"
-
-interface SelectControl {
-  type: "select"
-  options: string[]
-  default: string
-}
-
-interface BooleanControl {
-  type: "boolean"
-  default: boolean
-}
-
-interface TextControl {
-  type: "text"
-  default: string
-}
-
-interface NumberControl {
-  type: "number"
-  default: number
-  min?: number
-  max?: number
-}
-
-type ControlDef = SelectControl | BooleanControl | TextControl | NumberControl
-
-export type ControlDefs = Record<string, ControlDef>
-
-type ControlValues<T extends ControlDefs> = {
-  [K in keyof T]: T[K] extends SelectControl
-    ? string
-    : T[K] extends BooleanControl
-      ? boolean
-      : T[K] extends TextControl
-        ? string
-        : T[K] extends NumberControl
-          ? number
-          : never
-}
-
-export interface ControlEntry {
-  name: string
-  def: ControlDef
-  value: unknown
-  onChange: (value: unknown) => void
-}
-
-export function useControls<T extends ControlDefs>(defs: T) {
-  const [values, setValues] = useState<Record<string, unknown>>(() => {
-    const initial: Record<string, unknown> = {}
-    for (const [key, def] of Object.entries(defs)) {
-      initial[key] = def.default
-    }
-    return initial
-  })
-
-  const entries: ControlEntry[] = Object.entries(defs).map(([name, def]) => ({
-    name,
-    def,
-    value: values[name],
-    onChange: (value: unknown) =>
-      setValues((prev) => ({ ...prev, [name]: value })),
-  }))
-
-  return {
-    values: values as ControlValues<T>,
-    entries,
-  }
-}
+"use client"
+
+import { useState } from "react"
+
+interface SelectControl {
+  type: "select"
+  options: string[]
+  default: string
+}
+
+interface BooleanControl {
+  type: "boolean"
+  default: boolean
+}
+
+interface TextControl {
+  type: "text"
+  default: string
+}
+
+interface NumberControl {
+  type: "number"
+  default: number
+  min?: number
+  max?: number
+}
+
+type ControlDef = SelectControl | BooleanControl | TextControl | NumberControl
+
+export type ControlDefs = Record<string, ControlDef>
+
+type ControlValues<T extends ControlDefs> = {
+  [K in keyof T]: T[K] extends SelectControl
+    ? string
+    : T[K] extends BooleanControl
+      ? boolean
+      : T[K] extends TextControl
+        ? string
+        : T[K] extends NumberControl
+          ? number
+          : never
+}
+
+export interface ControlEntry {
+  name: string
+  def: ControlDef
+  value: unknown
+  onChange: (value: unknown) => void
+}
+
+export function useControls<T extends ControlDefs>(defs: T) {
+  const [values, setValues] = useState<Record<string, unknown>>(() => {
+    const initial: Record<string, unknown> = {}
+    for (const [key, def] of Object.entries(defs)) {
+      initial[key] = def.default
+    }
+    return initial
+  })
+
+  const entries: ControlEntry[] = Object.entries(defs).map(([name, def]) => ({
+    name,
+    def,
+    value: values[name],
+    onChange: (value: unknown) =>
+      setValues((prev) => ({ ...prev, [name]: value })),
+  }))
+
+  return {
+    values: values as ControlValues<T>,
+    entries,
+  }
+}