npm - @boyernick/standard-ui-react - Versions diffs - 0.1.1-canary.9 → 0.2.0 - Mend

@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/package.json +5 -3
package/src/accordion.tsx +5 -2
package/src/alert-dialog.tsx +1 -1
package/src/attachment.tsx +5 -2
package/src/autocomplete.tsx +4 -3
package/src/block-editor.tsx +1747 -0
package/src/brand.tsx +2 -2
package/src/breadcrumb.tsx +14 -7
package/src/button.tsx +22 -11
package/src/calendar.tsx +6 -3
package/src/carousel.tsx +220 -53
package/src/checkbox.tsx +3 -2
package/src/code-block.tsx +66 -5
package/src/collapsible.tsx +4 -2
package/src/combobox.tsx +4 -3
package/src/command.tsx +27 -12
package/src/dialog.tsx +33 -10
package/src/empty.tsx +4 -4
package/src/field.tsx +4 -3
package/src/filter-group.tsx +143 -0
package/src/icons.tsx +28 -1
package/src/illustrations.tsx +219 -141
package/src/index.ts +238 -18
package/src/input.tsx +8 -5
package/src/kbd.tsx +10 -4
package/src/lib/focus.ts +41 -0
package/src/lib/popup.ts +1 -1
package/src/lifeline/company-icon.tsx +71 -0
package/src/lifeline/index.ts +42 -0
package/src/lifeline/lifeline-data.ts +97 -0
package/src/lifeline/lifeline-desktop.tsx +204 -0
package/src/lifeline/lifeline-event.tsx +108 -0
package/src/lifeline/lifeline-fireworks.tsx +302 -0
package/src/lifeline/lifeline-hover-image.tsx +269 -0
package/src/lifeline/lifeline-icons.tsx +39 -0
package/src/lifeline/lifeline-intro-timing.ts +105 -0
package/src/lifeline/lifeline-labels.tsx +24 -0
package/src/lifeline/lifeline-layout.ts +1 -0
package/src/lifeline/lifeline-legend.tsx +31 -0
package/src/lifeline/lifeline-lightbox.tsx +309 -0
package/src/lifeline/lifeline-marker.tsx +183 -0
package/src/lifeline/lifeline-people.tsx +99 -0
package/src/lifeline/lifeline-photos.tsx +366 -0
package/src/lifeline/lifeline-shell.tsx +135 -0
package/src/lifeline/lifeline-utils.ts +83 -0
package/src/lifeline/lifeline-vertical.tsx +482 -0
package/src/lifeline/lifeline.tsx +69 -0
package/src/lifeline/types.ts +112 -0
package/src/lifeline/use-lifeline-intro.ts +130 -0
package/src/lifeline/use-lifeline-scroll.ts +1011 -0
package/src/lifeline/use-lifeline-vertical-scroll.ts +271 -0
package/src/menubar.tsx +9 -2
package/src/minimap.tsx +296 -0
package/src/modal.tsx +608 -0
package/src/navigation-menu.tsx +338 -67
package/src/number-field.tsx +336 -61
package/src/otp-field.tsx +4 -3
package/src/pagination.tsx +262 -42
package/src/password-protection.tsx +345 -0
package/src/popover.tsx +1 -1
package/src/progress.tsx +5 -0
package/src/questionnaire.tsx +284 -0
package/src/radio.tsx +4 -2
package/src/scroll-area.tsx +4 -1
package/src/select.tsx +5 -2
package/src/sidebar.tsx +113 -28
package/src/slider.tsx +66 -6
package/src/sounds.tsx +6 -10
package/src/spinner.tsx +105 -32
package/src/switch.tsx +4 -1
package/src/table.tsx +82 -15
package/src/tabs.tsx +189 -38
package/src/text-animate.tsx +71 -28
package/src/textarea.tsx +6 -1
package/src/timeline.tsx +378 -0
package/src/toast.tsx +214 -35
package/src/toggle.tsx +4 -2
package/src/toolbar.tsx +12 -7
package/src/tooltip.tsx +43 -3
package/src/video-player.tsx +396 -127
package/src/image-modal.tsx +0 -110
package/src/markdown-editor.tsx +0 -302

package/src/lifeline/lifeline-lightbox.tsx ADDED Viewed

@@ -0,0 +1,309 @@
+"use client"
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react"
+import { createPortal } from "react-dom"
+import { cn } from "../lib/cn"
+import type { LifelinePhoto } from "./types"
+const OPEN_MS = 520
+/**
+ * Gentle start, soft landing — the quint curve front-loaded nearly all
+ * of the travel into the first 120ms, which read as a jump.
+ */
+const EASE = "cubic-bezier(0.32, 0.72, 0, 1)"
+/** Fraction of the viewport the expanded media may occupy. */
+const FIT = 0.85
+interface Target {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+/**
+ * The card's true geometry at handoff time. Center comes from the
+ * bounding box (rotation about center preserves it); width/height are
+ * the untransformed layout size (offsetWidth/offsetHeight) — the
+ * bounding box of a tilted card is its axis-aligned hull, which is
+ * larger than the card and lands the clone visibly off.
+ */
+export interface LifelineLightboxStart {
+  cx: number
+  cy: number
+  w: number
+  h: number
+  /** Playback position of the card's video, for a seamless swap. */
+  mediaTime?: number
+}
+/**
+ * The clone's media. Videos mount paused, pre-seeked to the card's
+ * playback position — a static frame the compositor can scale without
+ * decoding — and only play once `playing` flips after the open
+ * transition settles. Dismissing pauses again for the return flight.
+ */
+function LightboxMedia({
+  photo,
+  playing,
+  mediaTime,
+}: {
+  photo: LifelinePhoto
+  playing: boolean
+  mediaTime?: number
+}) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const seeded = useRef(false)
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+    if (playing) {
+      // Seek only now, stationary — a seek during the transition
+      // decodes a new frame mid-flight and visibly swaps the image.
+      if (!seeded.current) {
+        seeded.current = true
+        if (mediaTime !== undefined) video.currentTime = mediaTime
+      }
+      video.play().catch(() => {
+        // Autoplay rejection just leaves the poster frame showing.
+      })
+    } else {
+      video.pause()
+    }
+  }, [playing, mediaTime])
+  if (!photo.video) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={photo.src}
+        alt={photo.alt}
+        className="block h-full w-full object-cover"
+      />
+    )
+  }
+  return (
+    <video
+      ref={videoRef}
+      src={photo.video}
+      poster={photo.src}
+      muted
+      loop
+      playsInline
+      preload="auto"
+      aria-label={photo.alt}
+      className="block h-full w-full object-cover"
+    />
+  )
+}
+function computeTarget(start: LifelineLightboxStart): Target {
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  const aspect = start.h / start.w
+  const width = Math.min(vw * FIT, (vh * FIT) / aspect)
+  const height = width * aspect
+  return { left: (vw - width) / 2, top: (vh - height) / 2, width, height }
+}
+/**
+ * Expands a floating card's media from its spot on the timeline to the
+ * center of the screen and back — a FLIP animation on a fixed clone
+ * portaled to <body> (the track is transformed, so fixed positioning
+ * inside it would break). The original card stays in layout, hidden,
+ * and is re-measured on dismiss so the media returns wherever the card
+ * now is, even if the timeline moved.
+ */
+export function LifelineLightbox({
+  photo,
+  rotate,
+  start,
+  getHome,
+  onClosed,
+}: {
+  photo: LifelinePhoto
+  /** The card's resting tilt — animated away as the media centers. */
+  rotate: number
+  /** The card's geometry at click time. */
+  start: LifelineLightboxStart
+  /** Re-measures the card at dismiss time. */
+  getHome: () => LifelineLightboxStart | null
+  onClosed: () => void
+}) {
+  const target = useRef<Target | null>(null)
+  if (target.current === null) target.current = computeTarget(start)
+  const { left, top, width, height } = target.current
+  const figureRef = useRef<HTMLElement>(null)
+  const reduceMotion = useRef(
+    typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  ).current
+  // Center-anchored FLIP: rotation and scale about the center match
+  // how the card itself is transformed, so the first frame is
+  // pixel-identical to the card underneath.
+  const toTransform = useCallback(
+    (home: LifelineLightboxStart) =>
+      `translate(${home.cx - (left + width / 2)}px, ${
+        home.cy - (top + height / 2)
+      }px) scale(${home.w / width}) rotate(${rotate}deg)`,
+    [left, top, width, height, rotate],
+  )
+  const [entered, setEntered] = useState(reduceMotion)
+  const [transform, setTransform] = useState(() =>
+    reduceMotion ? "none" : toTransform(start),
+  )
+  const closing = useRef(false)
+  // Playback waits for the open transition to finish — a playing
+  // video decodes frames while the transform animates and drops
+  // transition frames on mobile; a paused, pre-seeked frame is a
+  // static layer and animates cheaply.
+  const [settled, setSettled] = useState(reduceMotion)
+  // Safety net if transitionend never fires for the open.
+  useEffect(() => {
+    if (reduceMotion) return
+    const timeout = window.setTimeout(() => {
+      if (!closing.current) setSettled(true)
+    }, OPEN_MS + 80)
+    return () => window.clearTimeout(timeout)
+  }, [reduceMotion])
+  // FLIP: first paint sits over the card, next frame eases to center.
+  useLayoutEffect(() => {
+    if (reduceMotion) return
+    let inner = 0
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => {
+        setEntered(true)
+        setTransform("translate(0px, 0px) scale(1) rotate(0deg)")
+      })
+    })
+    return () => {
+      cancelAnimationFrame(outer)
+      cancelAnimationFrame(inner)
+    }
+  }, [reduceMotion])
+  // No gesture may pan while the lightbox is up — iOS otherwise
+  // rubber-bands the body behind the fixed overlay and can leave the
+  // whole page stuck offset after dismiss. React's root touch
+  // listeners are passive, so this needs a native non-passive one.
+  const rootRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const block = (event: TouchEvent) => event.preventDefault()
+    root.addEventListener("touchmove", block, { passive: false })
+    return () => root.removeEventListener("touchmove", block)
+  }, [])
+  // The press that opens the card dispatches one more click right
+  // after pointerup — by then the clone is mounted underneath the
+  // pointer and would dismiss itself. Swallow exactly that click;
+  // every later click dismisses normally.
+  useEffect(() => {
+    const swallow = (event: MouseEvent) => {
+      event.stopPropagation()
+      event.preventDefault()
+    }
+    window.addEventListener("click", swallow, { capture: true, once: true })
+    const timeout = window.setTimeout(() => {
+      window.removeEventListener("click", swallow, { capture: true })
+    }, 500)
+    return () => {
+      window.clearTimeout(timeout)
+      window.removeEventListener("click", swallow, { capture: true })
+    }
+  }, [])
+  const dismiss = useCallback(() => {
+    if (closing.current) return
+    closing.current = true
+    if (reduceMotion) {
+      onClosed()
+      return
+    }
+    setSettled(false) // freeze the video so the return flight is cheap
+    setEntered(false)
+    setTransform(toTransform(getHome() ?? start))
+    // transitionend is the primary signal; this is the safety net.
+    window.setTimeout(onClosed, OPEN_MS + 120)
+  }, [reduceMotion, onClosed, toTransform, getHome, start])
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") dismiss()
+    }
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [dismiss])
+  return createPortal(
+    <div
+      ref={rootRef}
+      className="fixed inset-0 z-[999] touch-none overscroll-contain"
+      role="dialog"
+      aria-modal="true"
+      aria-label={photo.alt}
+      // The portal lives under <body>, but React events still bubble up
+      // the component tree — without this, a backdrop press would reach
+      // the card's drag handlers and the track's scrubber.
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerMove={(event) => event.stopPropagation()}
+      onPointerUp={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <div
+        className={cn(
+          "absolute inset-0 cursor-zoom-out bg-black/70 transition-opacity",
+          entered ? "opacity-100" : "opacity-0",
+        )}
+        // Synced to the media's travel — a faster fade left the clone
+        // flying over an undimmed page at the end of the dismiss.
+        style={{ transitionDuration: `${OPEN_MS}ms` }}
+        onClick={dismiss}
+      />
+      <figure
+        ref={figureRef}
+        className="absolute cursor-zoom-out overflow-hidden rounded-xl shadow-2xl ring-1 ring-border-primary"
+        style={{
+          left,
+          top,
+          width,
+          height,
+          transform,
+          transformOrigin: "center",
+          transition: reduceMotion ? undefined : `transform ${OPEN_MS}ms ${EASE}`,
+          // Promoted for the whole flight — mobile otherwise
+          // re-rasterizes the shadowed, corner-clipped media mid-scale.
+          willChange: "transform",
+        }}
+        onClick={dismiss}
+        onTransitionEnd={(event) => {
+          if (event.propertyName !== "transform") return
+          if (closing.current) onClosed()
+          else setSettled(true)
+        }}
+      >
+        <LightboxMedia
+          photo={photo}
+          playing={settled}
+          mediaTime={start.mediaTime}
+        />
+      </figure>
+    </div>,
+    document.body,
+  )
+}

package/src/lifeline/lifeline-marker.tsx ADDED Viewed

@@ -0,0 +1,183 @@
+"use client"
+import { forwardRef, type CSSProperties } from "react"
+import { LifelineFilmIcon as Film, LifelineImageIcon as ImageIcon } from "./lifeline-icons"
+import { cn } from "../lib/cn"
+import { CompanyIcon } from "./company-icon"
+import {
+  getLifelineEventEffect,
+  getLifelineEventImage,
+  getLifelineEventKey,
+  LifelineEventText,
+} from "./lifeline-event"
+import { useLifelineFireworks } from "./lifeline-fireworks"
+import { useLifelineHoverImage } from "./lifeline-hover-image"
+import { aggregateLifelinePeople, LifelinePeople } from "./lifeline-people"
+import type { LifelineMarker } from "./types"
+interface LifelineMarkerColumnProps {
+  marker: LifelineMarker
+  birthYear: number
+  minWidth: number
+  animateIntro?: boolean
+  introDelay?: number
+  introDuration?: number
+}
+export const LifelineMarkerColumn = forwardRef<
+  HTMLDivElement,
+  LifelineMarkerColumnProps
+>(function LifelineMarkerColumn(
+  {
+    marker,
+    birthYear,
+    minWidth,
+    animateIntro = false,
+    introDelay = 0,
+    introDuration = 420,
+  },
+  ref,
+) {
+  const age = marker.age ?? marker.year - birthYear
+  const people = aggregateLifelinePeople(marker)
+  const hoverImage = useLifelineHoverImage()
+  const fireworks = useLifelineFireworks()
+  return (
+    <div
+      ref={ref}
+      className="group relative shrink-0 pr-8 transition-opacity duration-300 ease-out will-change-opacity"
+      style={{ width: minWidth }}
+      aria-label={marker.label ?? `${marker.year}`}
+    >
+      <div
+        className={cn("relative", animateIntro && "lifeline-marker-intro")}
+        style={{
+          animationDelay: animateIntro ? `${introDelay}ms` : undefined,
+          ...(animateIntro
+            ? ({
+                "--lifeline-marker-fade-ms": `${introDuration}ms`,
+              } as CSSProperties)
+            : {}),
+        }}
+      >
+        <span
+          className="absolute left-0 top-[var(--lifeline-rail)] z-10 h-[10px] w-px -translate-y-1/2 bg-fg-quaternary transition-colors duration-300 group-hover:bg-fg-tertiary"
+          aria-hidden="true"
+        />
+        <div className="flex w-full flex-col items-start text-left">
+          <p className="mb-5 h-4 text-[11px] font-medium leading-4 tabular-nums text-fg-tertiary transition-colors duration-300 group-hover:text-fg-primary">
+            {age}
+          </p>
+          <p className="mb-6 h-5 whitespace-nowrap text-[15px] font-medium leading-5 tabular-nums text-fg-secondary transition-colors duration-300 group-hover:text-fg-primary">
+            {marker.label ?? marker.year}
+          </p>
+          <div className="relative w-full pb-10 text-fg-secondary transition-colors duration-300 group-hover:text-fg-primary">
+            {/* When this column carries people, the content block reserves
+                the band's height as a floor: short and average columns put
+                their portraits on the same line as every other column, and
+                a column whose events run past the floor pushes its own
+                portraits below them instead of under them. pb-6 is the gap
+                in the overflow case — absorbed by the floor otherwise. */}
+            <div
+              className={cn(
+                "flex w-full flex-col items-start pt-6",
+                people.length > 0 &&
+                  "min-h-[var(--lifeline-people-top)] pb-6",
+              )}
+            >
+              {marker.badges && marker.badges.length > 0 && (
+                <div className="mb-3 flex items-center justify-start gap-2">
+                  {marker.badges.map((badge) => (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      key={badge.src}
+                      src={badge.src}
+                      alt={badge.alt}
+                      className="h-6 w-6 object-contain opacity-80 transition-opacity duration-300 group-hover:opacity-100"
+                    />
+                  ))}
+                </div>
+              )}
+              {marker.companies && marker.companies.length > 0 && (
+                <div className="mb-2 flex items-center justify-start gap-1.5">
+                  {marker.companies.map((company) => (
+                    <CompanyIcon
+                      key={company.id}
+                      id={company.id}
+                      label={company.name}
+                      className="opacity-70 transition-opacity duration-300 group-hover:opacity-100"
+                    />
+                  ))}
+                </div>
+              )}
+              <div className="min-h-[3.25rem] space-y-4">
+                {marker.events.map((event, index) => {
+                  const image = getLifelineEventImage(event)
+                  const effect = getLifelineEventEffect(event)
+                  return (
+                    <p
+                      key={getLifelineEventKey(event, index)}
+                      className={cn(
+                        "max-w-[18rem] text-left text-[14px] leading-[1.55] tracking-[-0.01em]",
+                        effect && "cursor-pointer",
+                      )}
+                      data-lifeline-interactive={effect ? "" : undefined}
+                      onMouseEnter={
+                        image && hoverImage
+                          ? () => hoverImage.show(image)
+                          : undefined
+                      }
+                      onMouseLeave={
+                        image && hoverImage ? hoverImage.hide : undefined
+                      }
+                      onClick={
+                        effect && fireworks
+                          ? () => fireworks.launch(effect)
+                          : undefined
+                      }
+                    >
+                      <LifelineEventText event={event} />
+                      {image && (
+                        // Glued to the last word with a no-break space so
+                        // the icon can never wrap onto a line of its own.
+                        <span className="whitespace-nowrap">
+                          {" "}
+                          {image.video ? (
+                            <Film
+                              className="ml-0.5 inline-block h-3 w-3 -translate-y-px text-fg-quaternary transition-colors duration-300"
+                              strokeWidth={1.75}
+                              aria-hidden="true"
+                            />
+                          ) : (
+                            <ImageIcon
+                              className="ml-0.5 inline-block h-3 w-3 -translate-y-px text-fg-quaternary transition-colors duration-300"
+                              strokeWidth={1.75}
+                              aria-hidden="true"
+                            />
+                          )}
+                        </span>
+                      )}
+                    </p>
+                  )
+                })}
+              </div>
+            </div>
+            {people.length > 0 && (
+              <div className="w-full">
+                <LifelinePeople people={people} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})

package/src/lifeline/lifeline-people.tsx ADDED Viewed

@@ -0,0 +1,99 @@
+import type { LifelineMarker } from "./types"
+export interface AggregatedLifelinePerson {
+  name: string
+  mentor: boolean
+  met: boolean
+  photo?: string
+}
+export function aggregateLifelinePeople(
+  marker: LifelineMarker,
+): AggregatedLifelinePerson[] {
+  const map = new Map<string, AggregatedLifelinePerson>()
+  const add = (
+    name: string,
+    type: "mentor" | "met",
+    photo?: string,
+  ) => {
+    const person = map.get(name) ?? { name, mentor: false, met: false }
+    person[type] = true
+    person.photo = person.photo ?? photo
+    map.set(name, person)
+  }
+  marker.mentors?.forEach((person) =>
+    add(person.name, "mentor", person.photo),
+  )
+  marker.met?.forEach((person) => add(person.name, "met", person.photo))
+  return [...map.values()]
+}
+function getInitials(name: string) {
+  return name
+    .split(" ")
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+}
+interface LifelinePeopleProps {
+  people: AggregatedLifelinePerson[]
+  allowWrap?: boolean
+}
+export function LifelinePeople({
+  people,
+  allowWrap = false,
+}: LifelinePeopleProps) {
+  if (people.length === 0) return null
+  return (
+    <div className="w-full space-y-3">
+      {people.map((person) => (
+        <div key={person.name} className="flex w-full items-center gap-2.5">
+          <div className="flex w-3 shrink-0 items-center justify-center gap-0.5">
+            {person.mentor && (
+              <span
+                className="h-1.5 w-1.5 rounded-full bg-blue-500"
+                aria-hidden="true"
+              />
+            )}
+            {person.met && (
+              <span
+                className="h-1.5 w-1.5 rounded-full bg-pink-500"
+                aria-hidden="true"
+              />
+            )}
+          </div>
+          {person.photo ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={person.photo}
+              alt={person.name}
+              width={28}
+              height={28}
+              className="h-7 w-7 shrink-0 rounded-full object-cover"
+            />
+          ) : (
+            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-inverted text-[10px] font-medium text-fg-inverted transition-colors duration-300">
+              {getInitials(person.name)}
+            </span>
+          )}
+          <p
+            className={
+              allowWrap
+                ? "text-left text-[13px] leading-snug text-fg-tertiary transition-colors duration-300"
+                : "whitespace-nowrap text-left text-[13px] text-fg-tertiary transition-colors duration-300 group-hover:text-fg-secondary"
+            }
+          >
+            {person.name}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}