create-omg 0.4.30

package/dist/template/src/components/ui/bottom-nav.tsx

@@ -0,0 +1,131 @@
+// Floating bottom tab bar — the iOS-style pill switcher from the omg home
+// screen, vendored for apps. A translucent blurred pill wrapped in a gradient
+// white hairline that catches the light along its top edge (the way an iOS
+// material does), with an active capsule that *slides* between tabs via a pure
+// GPU translate.
+//
+// This is the presentational, controlled component: pass it your tabs, the
+// active id, and an onSelect handler. It owns no routing — wire `active` /
+// `onSelect` to your router or local state.
+//
+//   const [tab, setTab] = useState("home")
+//   <BottomNav
+//     tabs={[
+//       { id: "home",    label: "Home",    Icon: Home },
+//       { id: "browse",  label: "Browse",  Icon: Compass },
+//       { id: "profile", label: "Profile", Icon: User },
+//     ]}
+//     active={tab}
+//     onSelect={setTab}
+//   />
+//
+// Self-contained: colours read the app's shadcn theme vars (--primary,
+// --background, --muted-foreground) so it follows whatever preset the app uses.
+// Vendored — edit freely.
+
+import type { ComponentType, CSSProperties } from "react"
+
+import { cn } from "@/lib/utils"
+
+// Tab width and gap are fixed so the sliding capsule can be a pure translate —
+// the only animated property (GPU-cheap, interruptible). TAB_GAP must match the
+// `gap-1` between tab buttons.
+const TAB_W = "4.5rem"
+const TAB_GAP = "0.25rem"
+// The omg motion curve (Ionic's iOS drawer easing).
+const EASE = "cubic-bezier(0.32, 0.72, 0, 1)"
+
+// A whisper of haptic feedback on tap where the platform supports it (iOS
+// Safari ignores it; Android/Chrome buzz ~10ms). No-op everywhere else.
+function haptic() {
+  if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+    try {
+      navigator.vibrate(8)
+    } catch {
+      /* feature-detected but disallowed (e.g. no user gesture) — ignore */
+    }
+  }
+}
+
+export type BottomNavItem<T extends string> = {
+  id: T
+  label: string
+  Icon: ComponentType<{ className?: string }>
+  // Visible but inert — rendered dimmed; taps don't fire onSelect.
+  disabled?: boolean
+}
+
+export function BottomNav<T extends string>({
+  tabs,
+  active,
+  onSelect,
+  className,
+}: {
+  tabs: ReadonlyArray<BottomNavItem<T>>
+  active: T
+  onSelect: (id: T) => void
+  className?: string
+}) {
+  const activeIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === active),
+  )
+  return (
+    <div
+      className={cn(
+        "pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center pb-[calc(0.875rem+env(safe-area-inset-bottom))]",
+        className,
+      )}
+    >
+      {/* Gradient hairline: brightest on the top edge, fading down — the
+          border itself is the p-px ring around the blurred pill. */}
+      <div className="pointer-events-auto rounded-full bg-gradient-to-b from-white/70 via-white/25 to-white/10 p-px shadow-[0_8px_28px_oklch(0_0_0/14%)] dark:from-white/25 dark:via-white/10 dark:to-white/5">
+        <nav className="relative flex items-center gap-1 rounded-full bg-background/85 p-1.5 backdrop-blur-xl">
+          {/* Sliding capsule: translate by activeIndex × (tab width + gap). */}
+          <span
+            aria-hidden
+            className="absolute inset-y-1.5 left-1.5 w-[var(--tab-w)] rounded-full bg-primary/12 transition-transform duration-[260ms]"
+            style={
+              {
+                "--tab-w": TAB_W,
+                transitionTimingFunction: EASE,
+                transform: `translateX(calc(${activeIndex} * (${TAB_W} + ${TAB_GAP})))`,
+              } as CSSProperties
+            }
+          />
+          {tabs.map(({ id, label, Icon, disabled }) => {
+            const selected = id === active
+            return (
+              <button
+                key={id}
+                type="button"
+                aria-label={label}
+                aria-current={selected ? "page" : undefined}
+                aria-disabled={disabled || undefined}
+                onClick={() => {
+                  if (disabled) return
+                  haptic()
+                  if (!selected) onSelect(id)
+                }}
+                className={cn(
+                  "relative flex w-[var(--tab-w)] flex-col items-center gap-0.5 rounded-full px-4 py-1.5 transition-[color,transform] duration-200 ease-out",
+                  disabled
+                    ? "text-muted-foreground/40"
+                    : selected
+                      ? "text-primary active:scale-[0.96]"
+                      : "text-muted-foreground hover:text-foreground active:scale-[0.96]",
+                )}
+                style={{ "--tab-w": TAB_W } as CSSProperties}
+              >
+                <Icon className="h-[18px] w-[18px]" />
+                <span className="text-[10.5px] font-medium tracking-[-0.01em]">
+                  {label}
+                </span>
+              </button>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}

package/dist/template/src/components/ui/button.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { playSound, type SoundName } from "@/components/ui/sound"
+
+// Squishy base Button — vendored, self-contained (no class-variance-authority
+// and no @base-ui dependency, so it works in a bare app without extra installs).
+//
+// The iOS "squish": `active:scale-[0.97]` on press, eased with the omg motion
+// curve, snapping back instantly on release (`active:transition-none`). Corners
+// pair the baked `squircle` utility with `rounded-md` so they read as soft
+// continuous corners on Chromium 139+ and fall back to normal rounding
+// everywhere else.
+//
+// Opt-in press SOUND: pass `sound` (or `sound="success"` etc.) and the button
+// plays a synthesized, zero-file Web Audio tick on press — the audio companion
+// to the visual squish. Off by default (silence is the right default; sound on
+// EVERY button is noise), gesture-driven so the browser lets it through, and it
+// self-mutes under prefers-reduced-motion. See `./sound`.
+//
+// Every colour reads the app's shadcn theme variables (--primary, --secondary,
+// …), so the button inherits whatever preset the app uses. Edit freely — it's
+// vendored into your project, not imported from a package.
+
+type Variant = "default" | "secondary" | "outline" | "ghost" | "destructive"
+type Size = "default" | "sm" | "lg" | "icon"
+
+const VARIANTS: Record<Variant, string> = {
+  default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline:
+    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+  ghost: "hover:bg-accent hover:text-accent-foreground",
+  destructive: "bg-destructive text-white hover:bg-destructive/90",
+}
+
+const SIZES: Record<Size, string> = {
+  default: "h-9 px-4 py-2",
+  sm: "h-8 gap-1.5 px-3 text-xs",
+  lg: "h-10 px-6",
+  icon: "size-9",
+}
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant
+  size?: Size
+  /**
+   * Play a synthesized press sound on pointer-down. `true` uses the soft
+   * `"tap"` tick; pass a preset name (`"click"`, `"success"`, …) to pick
+   * another. Off by default. Fires on pointer-down so the tick lands with the
+   * press, not the release.
+   */
+  sound?: boolean | SoundName
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    { className, variant = "default", size = "default", sound, onPointerDown, ...props },
+    ref,
+  ) {
+    const handlePointerDown = React.useCallback(
+      (event: React.PointerEvent<HTMLButtonElement>) => {
+        if (sound && !props.disabled) playSound(sound === true ? "tap" : sound)
+        onPointerDown?.(event)
+      },
+      [sound, props.disabled, onPointerDown],
+    )
+    return (
+      <button
+        ref={ref}
+        data-slot="button"
+        onPointerDown={handlePointerDown}
+        className={cn(
+          "inline-flex shrink-0 select-none items-center justify-center gap-2 rounded-md squircle text-sm font-medium whitespace-nowrap outline-none transition-[transform,background-color,box-shadow,border-color,color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] focus-visible:ring-[3px] focus-visible:ring-ring/50 active:scale-[0.97] active:transition-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          VARIANTS[variant],
+          SIZES[size],
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)

package/dist/template/src/components/ui/card.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+// Squircle Card — shadcn-shaped (Card / CardHeader / CardTitle / CardDescription
+// / CardContent / CardFooter) so it's a drop-in for anyone used to shadcn, with
+// the iOS continuous-corner `squircle` on the root surface. Theme-var driven
+// (bg-card / text-card-foreground), so it follows the app's preset. Vendored —
+// edit freely.
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl squircle border bg-card py-6 text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-content" className={cn("px-6", className)} {...props} />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }

package/dist/template/src/components/ui/otp-input.tsx

@@ -0,0 +1,179 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { playSound, type SoundName } from "@/components/ui/sound"
+
+// <OtpInput> — segmented one-time-code field (the "type the 6-digit code"
+// input). Vendored, self-contained (no input-otp / no @radix dependency), so
+// it drops into a bare app with nothing to install.
+//
+// Why it's not N separate <input>s: this renders ONE real, focusable text
+// input stretched invisibly across the field, with the digit cells painted
+// beneath it. That single input keeps everything the platform gives you for
+// free — native paste of a whole code, iOS/Android SMS autofill
+// (`autocomplete="one-time-code"`), the numeric soft keyboard on mobile
+// (`inputmode="numeric"`), and correct screen-reader semantics — while the
+// cells are yours to style. Auto-advance and backspace "just work" because
+// there's only one caret to move.
+//
+// Delight, on by the same rules as the rest of the kit:
+//   - Squircle continuous corners (paired with `rounded-md`, the fallback) so
+//     the cells match `Button`/`Card`.
+//   - The active cell shows a soft blinking caret; a filled field pops a subtle
+//     ring. Motion self-mutes under `prefers-reduced-motion`.
+//   - Opt-in tactile SOUND (`sound` prop): a quiet `tap` per digit and a
+//     `success` chime when the code completes — off by default (silence is the
+//     right default), gesture-driven, and self-muting under reduced-motion.
+//     See `./sound`.
+//
+// Controlled: drive `value` / `onChange` from state (mirrors how `VibesLogin`
+// already tracks the code). `onComplete` fires once the field fills — wire your
+// verify call there. Every colour reads the app's shadcn theme variables, so it
+// inherits whatever preset the app uses. Edit freely — it's yours now.
+
+export interface OtpInputProps {
+  /** The current code (controlled). Only allowed characters are ever stored. */
+  value: string
+  /** Called with the sanitized next value on every change. */
+  onChange: (value: string) => void
+  /** Fires once the field reaches `length`. Great place to auto-submit/verify. */
+  onComplete?: (value: string) => void
+  /** Number of cells. Defaults to 6 (the vibes email-code length). */
+  length?: number
+  /**
+   * Play a synthesized sound as the user types. `true` uses a soft `tap` per
+   * digit plus a `success` chime on completion; pass a preset name to use that
+   * tone for the per-digit tick instead. Off by default.
+   */
+  sound?: boolean | SoundName
+  disabled?: boolean
+  autoFocus?: boolean
+  /** Soft-keyboard hint. `"numeric"` (default) for codes; `"text"` for alnum. */
+  inputMode?: "numeric" | "text"
+  /**
+   * Which characters are accepted. Defaults to digits only. Anything typed or
+   * pasted that doesn't match is dropped (so pasting "123-456" yields "123456").
+   */
+  allowed?: RegExp
+  "aria-label"?: string
+  className?: string
+  /** Extra classes merged onto each cell (e.g. sizing, radius). */
+  cellClassName?: string
+}
+
+export function OtpInput({
+  value,
+  onChange,
+  onComplete,
+  length = 6,
+  sound = false,
+  disabled = false,
+  autoFocus = false,
+  inputMode = "numeric",
+  allowed = /[0-9]/,
+  "aria-label": ariaLabel = "Verification code",
+  className,
+  cellClassName,
+}: OtpInputProps) {
+  const [focused, setFocused] = React.useState(false)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  // Guard so onComplete fires once per fill, not on every keystroke while full.
+  const completedRef = React.useRef(false)
+
+  const tapTone: SoundName = sound === true ? "tap" : (sound as SoundName)
+
+  const sanitize = React.useCallback(
+    (raw: string) =>
+      Array.from(raw)
+        .filter((ch) => allowed.test(ch))
+        .join("")
+        .slice(0, length),
+    [allowed, length],
+  )
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const next = sanitize(e.target.value)
+    if (next === value) return
+    const grew = next.length > value.length
+    onChange(next)
+
+    if (next.length === length) {
+      if (!completedRef.current) {
+        completedRef.current = true
+        if (sound) playSound("success")
+        onComplete?.(next)
+      }
+    } else {
+      completedRef.current = false
+      if (grew && sound) playSound(tapTone)
+    }
+  }
+
+  // The active cell is the first empty slot, clamped to the last cell when full
+  // so the caret has somewhere to sit.
+  const activeIndex = Math.min(value.length, length - 1)
+  const cells = Array.from({ length }, (_, i) => value[i] ?? "")
+
+  return (
+    <div
+      className={cn("relative inline-flex w-full", className)}
+      onMouseDown={(e) => {
+        // Keep clicks anywhere in the field focusing the (invisible) input,
+        // even if they land between cells.
+        if (e.target !== inputRef.current) {
+          e.preventDefault()
+          inputRef.current?.focus()
+        }
+      }}
+    >
+      <div className="flex w-full items-center justify-center gap-2">
+        {cells.map((char, i) => {
+          const isActive = focused && i === activeIndex && !disabled
+          return (
+            <div
+              key={i}
+              data-slot="otp-cell"
+              data-active={isActive || undefined}
+              data-filled={char ? true : undefined}
+              className={cn(
+                "relative flex h-12 w-10 items-center justify-center rounded-md squircle border border-input bg-background text-xl font-medium tabular-nums shadow-sm transition-[color,box-shadow,border-color] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
+                isActive && "border-ring ring-[3px] ring-ring/50 z-10",
+                disabled && "opacity-50",
+                cellClassName,
+              )}
+            >
+              {char || (
+                // Blinking caret on the active empty cell; motion off under
+                // prefers-reduced-motion (Tailwind's motion-reduce variant).
+                isActive ? (
+                  <span
+                    aria-hidden="true"
+                    className="h-6 w-px animate-pulse bg-foreground motion-reduce:animate-none"
+                  />
+                ) : null
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={handleChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        inputMode={inputMode}
+        pattern={inputMode === "numeric" ? "[0-9]*" : undefined}
+        autoComplete="one-time-code"
+        aria-label={ariaLabel}
+        maxLength={length}
+        // Invisible but real: fills the field, captures typing/paste/autofill,
+        // and owns the (hidden) caret so the platform handles selection for us.
+        className="absolute inset-0 h-full w-full cursor-default bg-transparent text-center text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed"
+      />
+    </div>
+  )
+}

package/dist/template/src/components/ui/scroll-affordance.tsx

@@ -0,0 +1,106 @@
+// <ScrollAffordance> — a "there's more below" cue.
+//
+// Vendored, editable source (was @omg-dev/ui). Bobs while the watched container
+// is at the top, fades the instant the user scrolls, and hides itself when
+// there's nothing to scroll — so it's safe to render unconditionally.
+// Self-contained: no Tailwind utility classes, no runtime dependency beyond
+// React. Themes itself from your shadcn CSS variables (--muted-foreground)
+// with light/dark fallbacks and honors prefers-reduced-motion.
+
+import {
+  useEffect,
+  useLayoutEffect,
+  useState,
+  type CSSProperties,
+  type RefObject,
+} from "react"
+import { ensureStyles } from "@/components/ui/vibes-ui-styles"
+
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+const useIsoLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect
+
+export type ScrollAffordanceProps = {
+  /**
+   * The scroll container to watch. Omit to watch the window (the common case
+   * for a long landing page). Pass a ref to watch an overflowing panel.
+   */
+  scrollRef?: RefObject<HTMLElement | null>
+  /** Caption above the chevron. Pass `null` for a bare chevron. */
+  label?: string | null
+  /** Hide once scrolled this many px past the top. */
+  threshold?: number
+  className?: string
+  style?: CSSProperties
+}
+
+/**
+ * A self-aware "scroll for more" cue. It bobs while the watched container is
+ * at the top, fades away the moment the user scrolls, and hides itself
+ * entirely when there's nothing to scroll — so it's safe to render
+ * unconditionally.
+ */
+export function ScrollAffordance({
+  scrollRef,
+  label = "Scroll",
+  threshold = 24,
+  className = "",
+  style,
+}: ScrollAffordanceProps) {
+  useEffect(ensureStyles, [])
+  // Start hidden; the first measurement reveals it only if there's overflow.
+  const [hidden, setHidden] = useState(true)
+
+  useIsoLayoutEffect(() => {
+    if (typeof window === "undefined") return
+    const el = scrollRef?.current ?? null
+
+    const measure = () => {
+      const scrollTop = el ? el.scrollTop : window.scrollY
+      const scrollHeight = el
+        ? el.scrollHeight
+        : document.documentElement.scrollHeight
+      const clientHeight = el ? el.clientHeight : window.innerHeight
+      const scrollable = scrollHeight - clientHeight > threshold
+      setHidden(!scrollable || scrollTop > threshold)
+    }
+
+    const source: HTMLElement | Window = el ?? window
+    measure()
+    source.addEventListener("scroll", measure, { passive: true })
+    window.addEventListener("resize", measure)
+    // Content can grow after async data loads — re-measure on layout changes.
+    const ro =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(measure)
+        : null
+    if (ro) ro.observe(el ?? document.documentElement)
+
+    return () => {
+      source.removeEventListener("scroll", measure)
+      window.removeEventListener("resize", measure)
+      ro?.disconnect()
+    }
+  }, [scrollRef, threshold])
+
+  return (
+    <span
+      className={`vui vui-scroll ${className}`.trim()}
+      style={style}
+      data-hidden={hidden}
+      aria-hidden="true"
+    >
+      {label ? <span>{label}</span> : null}
+      <svg
+        className="vui-scroll-chevron"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </span>
+  )
+}