create-omg 0.4.41 → 0.4.43

package/dist/templates/react-ts/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/templates/react-ts/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/templates/react-ts/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/templates/react-ts/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>
+  )
+}

package/dist/templates/react-ts/src/components/ui/sound.ts

@@ -0,0 +1,182 @@
+// useSound / playSound — the AUDIO half of the delight kit (its haptic-ish
+// sibling to the visual `transitions` / `AnimatedNumber` primitives).
+//
+// Every sound is SYNTHESIZED at runtime with the Web Audio API — there are no
+// `.mp3`/`.wav` files to ship, fetch, or decode. The whole thing is a few
+// oscillators and a gain envelope, so it adds ~0kb of assets and a couple kb of
+// code, and it themes to nothing (pure tones) so it drops into any app.
+//
+// Design rules baked in, so a button that opts into sound never feels cheap:
+//   - One shared, lazily-created AudioContext, resumed on the first gesture.
+//     Browsers block audio until a user interaction, and a button press IS one,
+//     so the first click both unlocks and plays.
+//   - Silently no-ops when Web Audio is unavailable (SSR, old browsers) or when
+//     sound is disabled — exactly like the haptics singleton. It never throws.
+//   - Respects `prefers-reduced-motion`: a user who asked for a calmer, quieter
+//     experience gets silence unless the app explicitly forces sound on.
+//   - Short, quiet, rounded envelopes (soft attack + exponential release) so
+//     presses read as a tactile "tick", never a harsh beep.
+//
+// Self-contained: no CSS, no Tailwind, no runtime dependency beyond React.
+// Edit the PRESETS table freely — it's vendored into your project.
+
+import { useCallback, useMemo } from "react"
+
+/** Built-in synthesized sounds. Pass one of these names to `play`. */
+export type SoundName =
+  | "tap" // soft, short press tick — the default for buttons
+  | "click" // crisper, slightly louder press
+  | "toggleOn" // rising two-tone — switch/checkbox turning on
+  | "toggleOff" // falling two-tone — switch/checkbox turning off
+  | "success" // pleasant rising major third — save/confirm
+  | "error" // low, buzzy descending — invalid/destructive
+  | "notify" // gentle two-note chime — a new item/notification
+
+type Tone = {
+  /** Oscillator frequency in Hz (or the START of a glide, with `to`). */
+  freq: number
+  /** Optional glide target — the pitch ramps from `freq` to `to`. */
+  to?: number
+  /** How long the tone rings, in seconds. */
+  duration: number
+  /** Peak gain (0–1). Kept low so sounds stay tactile, not startling. */
+  gain?: number
+  /** Oscillator shape. `sine`/`triangle` are soft; `square`/`sawtooth` bite. */
+  type?: OscillatorType
+  /** Delay before this tone starts, in seconds (for two-note sequences). */
+  delay?: number
+}
+
+// Each preset is one or more tones layered/sequenced. Frequencies are chosen
+// to sit in a musical relationship (unison, thirds, fifths) so multi-tone
+// sounds read as "nice" rather than random.
+const PRESETS: Record<SoundName, Tone[]> = {
+  tap: [{ freq: 660, duration: 0.05, gain: 0.05, type: "sine" }],
+  click: [{ freq: 880, duration: 0.045, gain: 0.07, type: "triangle" }],
+  toggleOn: [
+    { freq: 587.33, duration: 0.06, gain: 0.05, type: "sine" },
+    { freq: 880, duration: 0.07, gain: 0.05, type: "sine", delay: 0.045 },
+  ],
+  toggleOff: [
+    { freq: 880, duration: 0.06, gain: 0.05, type: "sine" },
+    { freq: 587.33, duration: 0.07, gain: 0.05, type: "sine", delay: 0.045 },
+  ],
+  success: [
+    { freq: 523.25, duration: 0.08, gain: 0.05, type: "sine" },
+    { freq: 659.25, duration: 0.12, gain: 0.05, type: "sine", delay: 0.07 },
+  ],
+  error: [{ freq: 200, to: 120, duration: 0.16, gain: 0.06, type: "sawtooth" }],
+  notify: [
+    { freq: 784, duration: 0.08, gain: 0.045, type: "triangle" },
+    { freq: 1046.5, duration: 0.12, gain: 0.045, type: "triangle", delay: 0.06 },
+  ],
+}
+
+let ctx: AudioContext | null = null
+let enabled = true
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  )
+}
+
+function getContext(): AudioContext | null {
+  if (typeof window === "undefined") return null
+  const Ctor: typeof AudioContext | undefined =
+    window.AudioContext ??
+    (window as unknown as { webkitAudioContext?: typeof AudioContext })
+      .webkitAudioContext
+  if (!Ctor) return null
+  if (!ctx) {
+    try {
+      ctx = new Ctor()
+    } catch {
+      return null
+    }
+  }
+  // A context created before a gesture starts `suspended`; a gesture-driven
+  // call resumes it. Fire-and-forget — if it's blocked, playback just no-ops.
+  if (ctx.state === "suspended") void ctx.resume().catch(() => {})
+  return ctx
+}
+
+function ring(context: AudioContext, tone: Tone, startAt: number) {
+  const osc = context.createOscillator()
+  const amp = context.createGain()
+  const peak = tone.gain ?? 0.05
+  const t0 = startAt + (tone.delay ?? 0)
+  const t1 = t0 + tone.duration
+
+  osc.type = tone.type ?? "sine"
+  osc.frequency.setValueAtTime(tone.freq, t0)
+  if (tone.to != null) osc.frequency.exponentialRampToValueAtTime(tone.to, t1)
+
+  // Soft attack, exponential release — a rounded "tick", not a click artifact.
+  amp.gain.setValueAtTime(0.0001, t0)
+  amp.gain.exponentialRampToValueAtTime(peak, t0 + 0.008)
+  amp.gain.exponentialRampToValueAtTime(0.0001, t1)
+
+  osc.connect(amp).connect(context.destination)
+  osc.start(t0)
+  osc.stop(t1 + 0.02)
+}
+
+/**
+ * Play a synthesized sound. Safe to call anywhere: silently no-ops on unsupported
+ * platforms, when sound is disabled, or under `prefers-reduced-motion`. Best
+ * called from within a user gesture (a click/press handler) so the browser lets
+ * audio through.
+ *
+ * You can also pass an ad-hoc tone (or array of tones) instead of a preset name
+ * to synthesize a one-off sound.
+ */
+export function playSound(sound: SoundName | Tone | Tone[]): void {
+  if (!enabled || prefersReducedMotion()) return
+  const context = getContext()
+  if (!context) return
+  const tones =
+    typeof sound === "string" ? PRESETS[sound] : Array.isArray(sound) ? sound : [sound]
+  if (!tones || tones.length === 0) return
+  const now = context.currentTime
+  try {
+    for (const tone of tones) ring(context, tone, now)
+  } catch {
+    // AudioContext can throw if it was closed out from under us — ignore.
+  }
+}
+
+/**
+ * Globally enable or disable all synthesized sound (e.g. a settings toggle).
+ * Defaults to enabled. Disabling makes every `playSound`/`useSound().play` a
+ * no-op without changing any call sites.
+ */
+export function setSoundEnabled(next: boolean): void {
+  enabled = next
+}
+
+/** Whether synthesized sound is currently enabled (ignores reduced-motion). */
+export function isSoundEnabled(): boolean {
+  return enabled
+}
+
+/**
+ * Hook wrapper. Returns a stable `play` you can drop into event handlers, plus
+ * the enable/disable controls. `play` defaults to the `"tap"` press tick.
+ *
+ * ```tsx
+ * const { play } = useSound()
+ * <Button onClick={() => { play("success"); save() }}>Save</Button>
+ * ```
+ */
+export function useSound() {
+  const play = useCallback((sound: SoundName | Tone | Tone[] = "tap") => {
+    playSound(sound)
+  }, [])
+  return useMemo(
+    () => ({ play, setEnabled: setSoundEnabled, isEnabled: isSoundEnabled }),
+    [play],
+  )
+}