@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/ui/glasscn/liquid-glass.tsx

@@ -1,316 +1,59 @@
 "use client"
 
-import {
-  type CSSProperties,
-  forwardRef,
-  type HTMLAttributes,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-
+import { Glass, type GlassOptics } from "@samasante/liquid-glass"
+import { forwardRef, type HTMLAttributes } from "react"
 import { cn } from "@/lib/utils"
-
-type MapGeometry = {
-  width: number // element width, CSS px, integer
-  height: number // element height, CSS px, integer
-  radius: number // corner radius, CSS px, already clamped to min(width, height) / 2
-  bezel: number // fraction (0..1] of the half-min-dimension used as the refractive band
-}
-
-const MAX_TEXTURE_SIZE = 480
-const EDGE_TAPER_PX = 1.25
-
-const displacementMapCache = new Map<string, string>()
-
-// CSS.supports("backdrop-filter", "url(#f)") returns true in Safari and
-// Firefox (they parse the value) but neither browser actually renders SVG
-// filters through backdrop-filter. UA sniffing is the only reliable approach.
-// When WebKit ships support (track WebKit bug 245510), loosen this function.
-function supportsSvgBackdropFilter() {
-  if (typeof navigator === "undefined") return false
-  const ua = navigator.userAgent
-  const isChromium = /Chrom(e|ium)/.test(ua) || /Edg\//.test(ua)
-  return isChromium && !/Firefox/.test(ua)
-}
-
-// NOTE: Per-corner radii and percentage radii are NOT supported. The map
-// reads only borderTopLeftRadius in px. If a future consumer needs
-// asymmetric corners, extend the corner SDF branch to accept four radii.
-//
-// NOTE: Map regeneration renders a ≤480 px texture and encodes a PNG for
-// each unique (width, height, radius, bezel). Continuously animating the
-// element's SIZE will thrash the cache; animate transform: scale instead.
-function createDisplacementMap({ width, height, radius, bezel }: MapGeometry) {
-  const cacheKey = `${width}:${height}:${radius}:${bezel}`
-  const cached = displacementMapCache.get(cacheKey)
-  if (cached !== undefined) return cached
-
-  const downscale = Math.min(1, MAX_TEXTURE_SIZE / Math.max(width, height))
-  const texWidth = Math.max(2, Math.round(width * downscale))
-  const texHeight = Math.max(2, Math.round(height * downscale))
-
-  const canvas = document.createElement("canvas")
-  canvas.width = texWidth
-  canvas.height = texHeight
-  const ctx = canvas.getContext("2d")
-  if (!ctx) return ""
-
-  const image = ctx.createImageData(texWidth, texHeight)
-  const data = image.data
-  const halfWidth = width / 2
-  const halfHeight = height / 2
-  const r = Math.min(radius, halfWidth, halfHeight)
-  const bezelPx = Math.max(1, bezel * Math.min(halfWidth, halfHeight))
-
-  for (let ty = 0; ty < texHeight; ty += 1) {
-    for (let tx = 0; tx < texWidth; tx += 1) {
-      // Texel center in element coordinates, origin at element center.
-      const px = ((tx + 0.5) / texWidth) * width - halfWidth
-      const py = ((ty + 0.5) / texHeight) * height - halfHeight
-
-      // Signed distance + outward normal of the rounded-rectangle contour.
-      const qx = Math.abs(px) - (halfWidth - r)
-      const qy = Math.abs(py) - (halfHeight - r)
-      let signedDistance: number
-      let dirX = 0
-      let dirY = 0
-      if (qx > 0 && qy > 0) {
-        const len = Math.hypot(qx, qy)
-        signedDistance = len - r
-        dirX = (Math.sign(px) * qx) / len
-        dirY = (Math.sign(py) * qy) / len
-      } else if (qx > qy) {
-        signedDistance = qx - r
-        dirX = Math.sign(px)
-      } else {
-        signedDistance = qy - r
-        dirY = Math.sign(py)
-      }
-
-      const index = (ty * texWidth + tx) * 4
-      const inside = -signedDistance // px from the contour, positive inside
-
-      if (inside <= 0) {
-        data[index] = 128
-        data[index + 1] = 128
-        data[index + 2] = 128
-        data[index + 3] = 255
-        continue
-      }
-
-      const t = Math.min(1, inside / bezelPx) // 0 at the edge → 1 at the bezel's inner end
-      let magnitude = 1 - convexSquircle(t) // max refraction at the edge, optically flat interior
-      magnitude *= Math.min(1, inside / EDGE_TAPER_PX) // avoid sampling artifacts on the outermost pixels
-
-      data[index] = Math.round(128 + dirX * magnitude * 127)
-      data[index + 1] = Math.round(128 + dirY * magnitude * 127)
-      data[index + 2] = 128
-      data[index + 3] = 255
-    }
-  }
-
-  ctx.putImageData(image, 0, 0)
-  const mapUrl = canvas.toDataURL("image/png")
-  displacementMapCache.set(cacheKey, mapUrl)
-  return mapUrl
-}
-
-function convexSquircle(x: number) {
-  return Math.pow(1 - Math.pow(1 - x, 4), 0.25)
+import { glassVariantOptics, glassVariantStyles, type TFrostGlassVariant } from "@/lib/glass-variants"
+
+/** A non-interactive material layer: the host keeps its semantics and layout. */
+export function GlassSurface({
+  glassVariant = "liquid-refract",
+  optics,
+}: {
+  glassVariant?: TFrostGlassVariant
+  optics?: Partial<GlassOptics>
+}) {
+  return (
+    <Glass
+      aria-hidden="true"
+      data-glass-material="samasante"
+      className={cn("pointer-events-none", glassVariantStyles[glassVariant])}
+      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: "inherit", zIndex: -1 }}
+      optics={{ ...glassVariantOptics[glassVariant], ...optics }}
+    >
+      <span />
+    </Glass>
+  )
 }
 
-export type LiquidGlassProps = HTMLAttributes<HTMLDivElement> & {
-  /** Extra blur mixed into the backdrop-filter after the SVG refraction. */
+export type TLiquidGlassProps = HTMLAttributes<HTMLDivElement> & {
+  glassVariant?: TFrostGlassVariant
+  optics?: Partial<GlassOptics>
   blur?: number
-  /** SVG displacement strength. Higher values bend the sampled backdrop more. */
   refraction?: number
-  /**
-   * @deprecated Texture size now derives from element size. Accepted for
-   * backwards-compatibility but has no effect.
-   */
+  /** @deprecated The library manages displacement map resolution. */
   mapSize?: number
-  /** Fraction of the radius used as the curved edge where most refraction happens. */
   bezel?: number
-  /** Backdrop saturation. */
   saturation?: number
 }
 
-export const LiquidGlass = forwardRef<HTMLDivElement, LiquidGlassProps>(
-  function LiquidGlass(
-    {
-      blur = 2,
-      refraction = 10,
-      mapSize: _mapSize,
-      bezel = 10.34,
-      saturation = 10.28,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    const rawId = useId()
-    const filterId = useMemo(
-      () => `liquid-glass-${rawId.replace(/:/g, "")}`,
-      [rawId]
-    )
-
-    // -------------------------------------------------------------------------
-    // Ref merge — we need the DOM node to measure geometry while still
-    // forwarding the ref to the consumer.
-    // -------------------------------------------------------------------------
-
-    const localRef = useRef<HTMLDivElement | null>(null)
-    const setRefs = useCallback(
-      (node: HTMLDivElement | null) => {
-        localRef.current = node
-        if (typeof ref === "function") ref(node)
-        else if (ref) ref.current = node
-      },
-      [ref]
-    )
-
-    // -------------------------------------------------------------------------
-    // Geometry measurement via ResizeObserver
-    // -------------------------------------------------------------------------
-
-    const [geometry, setGeometry] = useState<MapGeometry | null>(null)
-
-    useEffect(() => {
-      const el = localRef.current
-      if (!el) return
-      const measure = () => {
-        const rect = el.getBoundingClientRect()
-        const width = Math.round(rect.width)
-        const height = Math.round(rect.height)
-        if (!width || !height) return
-        const parsed = Number.parseFloat(
-          getComputedStyle(el).borderTopLeftRadius
-        )
-        const radius = Math.min(
-          Number.isFinite(parsed) ? parsed : Math.min(width, height) / 2,
-          width / 2,
-          height / 2
-        )
-        setGeometry((prev) =>
-          prev &&
-          prev.width === width &&
-          prev.height === height &&
-          prev.radius === radius &&
-          prev.bezel === bezel
-            ? prev
-            : { width, height, radius, bezel }
-        )
-      }
-      measure()
-      const observer = new ResizeObserver(measure)
-      observer.observe(el)
-      return () => observer.disconnect()
-    }, [bezel])
-
-    const mapUrl = useMemo(
-      () => (geometry ? createDisplacementMap(geometry) : ""),
-      [geometry]
-    )
-
-    // -------------------------------------------------------------------------
-    // Browser capability gate
-    //
-    // Both SSR and the first client render take the fallback branch so hydration
-    // never mismatches. The state is set in an effect (client-only).
-    // -------------------------------------------------------------------------
-
-    const [supported, setSupported] = useState(false)
-
-    useEffect(() => {
-      setSupported(supportsSvgBackdropFilter())
-    }, [])
-
-    const refractionActive = supported && mapUrl !== ""
-    const backdropFilter = refractionActive
-      ? `url(#${filterId}) blur(${blur}px) saturate(${saturation})`
-      : `blur(${blur + 2}px) saturate(${saturation})`
-
+/** Compatibility adapter for existing consumers; all optics run in the library. */
+export const LiquidGlass = forwardRef<HTMLDivElement, TLiquidGlassProps>(
+  function LiquidGlass({
+    glassVariant = "liquid-refract", optics, blur, refraction,
+    mapSize: _mapSize, bezel, saturation, className, children, ...props
+  }, ref) {
     return (
-      <>
-        <div
-          ref={setRefs}
-          className={cn(
-            "relative overflow-hidden rounded-full bg-white/[0.08]",
-            className
-          )}
-          style={
-            {
-              ...style,
-              backdropFilter,
-              WebkitBackdropFilter: backdropFilter,
-            } as CSSProperties
-          }
-          {...props}
-        >
-          {children}
-          <span
-            aria-hidden
-            className="pointer-events-none absolute inset-0 rounded-[inherit]"
-            style={{
-              // Rim thickness, overridable per-consumer via --liquid-glass-rim-width.
-              padding: "var(--liquid-glass-rim-width, 2.9px)",
-              background:
-                // iOS 27 liquid-glass rim. Each gradient runs ALONG its edges and
-                // fades to nothing at the corners, uniform in between:
-                //   - to right  → white streak on the top + bottom runs
-                //   - to bottom → dark streak on the left + right runs
-                // Streak colors are overridable per-consumer via the
-                // --liquid-glass-rim-light / --liquid-glass-rim-dark variables;
-                // --liquid-glass-rim-fade sets how far from each corner the
-                // streak takes to reach full strength (smaller = longer streak).
-                "linear-gradient(to right, rgba(255,255,255,0), var(--liquid-glass-rim-light, rgba(255,255,255,0.25)) var(--liquid-glass-rim-fade, 18%), var(--liquid-glass-rim-light, rgba(255,255,255,0.25)) calc(100% - var(--liquid-glass-rim-fade, 18%)), rgba(255,255,255,0)), " +
-                "linear-gradient(to bottom, rgba(0,0,0,0), var(--liquid-glass-rim-dark, rgba(0,0,0,0.2)) var(--liquid-glass-rim-fade, 18%), var(--liquid-glass-rim-dark, rgba(0,0,0,0.2)) calc(100% - var(--liquid-glass-rim-fade, 18%)), rgba(0,0,0,0))",
-              WebkitMask:
-                "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-              WebkitMaskComposite: "xor",
-              mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
-            }}
-          />
-        </div>
-
-        {refractionActive && (
-          <svg className="absolute size-0 overflow-hidden" aria-hidden>
-            <filter
-              id={filterId}
-              x="0"
-              y="0"
-              width="100%"
-              height="100%"
-              colorInterpolationFilters="sRGB"
-            >
-              <feImage
-                href={mapUrl}
-                x="0"
-                y="0"
-                width="100%"
-                height="100%"
-                preserveAspectRatio="none"
-                result="map"
-              />
-              <feDisplacementMap
-                in="SourceGraphic"
-                in2="map"
-                scale={refraction}
-                xChannelSelector="R"
-                yChannelSelector="G"
-                result="displaced"
-              />
-              <feGaussianBlur in="displaced" stdDeviation="0.55" />
-            </filter>
-          </svg>
-        )}
-      </>
+      <div ref={ref} className={cn("relative isolate rounded-full", className)} {...props}>
+        <GlassSurface glassVariant={glassVariant} optics={{
+          ...(blur !== undefined && { frost: Math.max(0, blur) }),
+          ...(refraction !== undefined && { strength: Math.min(1, Math.max(0, refraction / 100)) }),
+          ...(bezel !== undefined && { bendWidth: Math.min(1, Math.max(0, bezel / 100)) }),
+          ...(saturation !== undefined && { saturate: Math.max(0, saturation) }),
+          ...optics,
+        }} />
+        {children}
+      </div>
     )
   }
 )

package/src/components/ui/input-group.tsx

@@ -3,8 +3,8 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 import { cn } from "@/lib/utils";
-import { Input, type InputProps } from "@/components/ui/input";
-import { Textarea, type TextareaProps } from "@/components/ui/textarea";
+import { Input, type TInputProps } from "@/components/ui/input";
+import { Textarea, type TTextareaProps } from "@/components/ui/textarea";
 
 const inputGroupAddonVariants = cva(
   "flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80",
@@ -93,13 +93,13 @@ export function InputGroupText({
 export function InputGroupInput({
   className,
   ...props
-}: InputProps): React.ReactElement {
+}: TInputProps): React.ReactElement {
   return <Input className={className} unstyled {...props} />;
 }
 
 export function InputGroupTextarea({
   className,
   ...props
-}: TextareaProps): React.ReactElement {
+}: TTextareaProps): React.ReactElement {
   return <Textarea className={className} unstyled {...props} />;
 }

package/src/components/ui/input.tsx

@@ -4,7 +4,7 @@ import { Input as InputPrimitive } from "@base-ui/react/input";
 import type * as React from "react";
 import { cn } from "@/lib/utils";
 
-export type InputProps = Omit<
+export type TInputProps = Omit<
   InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
   "size"
 > & {
@@ -20,7 +20,7 @@ export function Input({
   nativeInput = false,
   style,
   ...props
-}: InputProps): React.ReactElement {
+}: TInputProps): React.ReactElement {
   const inputClassName = cn(
     // The 5000000s background-color entry is the autofill-flash suppression
     // hack; height/line-height/padding tween size-prop changes.

package/src/components/ui/menu-command.tsx

@@ -1,17 +1,18 @@
 "use client"
 
-import type * as React from "react"
+import * as React from "react"
+import { Popover, PopoverPopup, PopoverTrigger } from "@/components/ui/popover"
 import {
-  Menu,
-  MenuGroup,
-  MenuItem,
-  MenuLinkItem,
-  MenuPopup,
-  MenuTrigger,
-} from "@/components/ui/menu"
+  Command,
+  CommandInput,
+  CommandList,
+  CommandItem,
+  CommandPanel,
+  CommandEmpty,
+} from "@/components/ui/command"
 import { cn } from "@/lib/utils"
 
-export interface MenuCommandItem {
+export interface IMenuCommandItem {
   id: string
   label: React.ReactNode
   /** Muted copy after the label ("Upload from your computer"). */
@@ -25,16 +26,15 @@ export interface MenuCommandItem {
   onSelect?: () => void
 }
 
-export interface MenuCommandListProps {
-  items: MenuCommandItem[]
-  onSelect?: (item: MenuCommandItem) => void
+export interface IMenuCommandListProps {
+  items: IMenuCommandItem[]
+  onSelect?: (item: IMenuCommandItem) => void
   className?: string
 }
 
 /**
- * Command rows for a menu popup: icon · label · description · trailing
- * status. Use inside any `MenuPopup`, or via `MenuCommand` for the wired
- * trigger + popup pair.
+ * Searchable command rows: icon · label · description · trailing status.
+ * Uses the shared Command components; MenuCommand adds a popover trigger.
  *
  * @sketch "Atom / Menu Command"
  */
@@ -42,63 +42,83 @@ export function MenuCommandList({
   items,
   onSelect,
   className,
-}: MenuCommandListProps): React.ReactElement {
+}: IMenuCommandListProps): React.ReactElement {
   return (
-    <MenuGroup className={cn("flex flex-col", className)} data-slot="menu-command-list">
-      {items.map((item) => {
-        const body = (
-          <>
-            {item.icon ? (
-              <span className="flex size-4 shrink-0 items-center justify-center text-text-secondary [&>svg]:size-4">
-                {item.icon}
-              </span>
-            ) : null}
-            <span className="shrink-0 font-medium text-text-primary">{item.label}</span>
-            {item.description ? (
-              <span className="truncate text-text-secondary">{item.description}</span>
-            ) : null}
-            {item.trailing ? (
-              <span className="ml-auto shrink-0 pl-3 text-semantic-success">{item.trailing}</span>
-            ) : null}
-          </>
-        )
-        const rowClass = "h-9 gap-2.5 rounded-md px-2 text-[13px]"
-        const select = () => {
-          item.onSelect?.()
-          onSelect?.(item)
-        }
-        return item.href ? (
-          <MenuLinkItem
-            aria-disabled={item.disabled || undefined}
-            className={cn(rowClass, item.disabled && "pointer-events-none opacity-64")}
-            data-command={item.id}
-            href={item.href}
-            key={item.id}
-            onClick={select}
-          >
-            {body}
-          </MenuLinkItem>
-        ) : (
-          <MenuItem
-            className={rowClass}
-            data-command={item.id}
-            disabled={item.disabled}
-            key={item.id}
-            onClick={select}
-          >
-            {body}
-          </MenuItem>
-        )
-      })}
-    </MenuGroup>
+    <Command
+      items={items}
+      autoHighlight
+      
+      itemToStringValue={(value) => {
+        const item = value as IMenuCommandItem
+        return typeof item.label === "string" ? item.label : item.id
+      }}
+    >
+      <CommandPanel className={className} data-slot="menu-command-list">
+        <CommandInput
+          aria-label="Search commands"
+          placeholder="Search commands…"
+        />
+        <CommandEmpty>No commands found.</CommandEmpty>
+        <CommandList className="">
+          {(item: IMenuCommandItem) => {
+            const body = (
+              <>
+                {item.icon ? (
+                  <span className="size-4 [&>svg]:size-4 flex shrink-0 items-center justify-center text-text-secondary">
+                    {item.icon}
+                  </span>
+                ) : null}
+                <span className="font-medium shrink-0 text-text-primary">
+                  {item.label}
+                </span>
+                {item.description ? (
+                  <span className="truncate text-text-secondary">
+                    {item.description}
+                  </span>
+                ) : null}
+                {item.trailing ? (
+                  <span className="pl-3 ml-auto shrink-0 text-semantic-success">
+                    {item.trailing}
+                  </span>
+                ) : null}
+              </>
+            )
+            const rowClass = "h-9 gap-2.5 rounded-md px-2 text-[13px]"
+            const select = () => {
+              item.onSelect?.()
+              onSelect?.(item)
+            }
+            return (
+              <CommandItem
+                key={item.id}
+                value={item}
+                className={rowClass}
+                data-command={item.id}
+                disabled={item.disabled}
+                render={
+                  item.href && !item.disabled ? (
+                    <a href={item.href} />
+                  ) : undefined
+                }
+                onClick={() => {
+                  if (!item.disabled) select()
+                }}
+              >
+                {body}
+              </CommandItem>
+            )
+          }}
+        </CommandList>
+      </CommandPanel>
+    </Command>
   )
 }
 
-export interface MenuCommandProps extends MenuCommandListProps {
+export interface IMenuCommandProps extends IMenuCommandListProps {
   /** The trigger element; receives the menu's trigger props. */
   children: React.ReactElement
-  side?: React.ComponentProps<typeof MenuPopup>["side"]
-  align?: React.ComponentProps<typeof MenuPopup>["align"]
+  side?: React.ComponentProps<typeof PopoverPopup>["side"]
+  align?: React.ComponentProps<typeof PopoverPopup>["align"]
   popupClassName?: string
 }
 
@@ -108,21 +128,29 @@ export function MenuCommand({
   items,
   onSelect,
   side = "top",
-  align = "start",
+  align = "center",
   className,
   popupClassName,
-}: MenuCommandProps): React.ReactElement {
+}: IMenuCommandProps): React.ReactElement {
+  const [open, setOpen] = React.useState(false)
   return (
-    <Menu>
-      <MenuTrigger render={children} />
-      <MenuPopup
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger render={children} />
+      <PopoverPopup
         align={align}
-        className={cn("w-[28rem] max-w-[calc(100vw-2rem)]", popupClassName)}
+        className={cn("w-[28rem] max-w-[calc(100vw-2rem)] bg-transparent border-none", popupClassName)}
         side={side}
         sideOffset={8}
       >
-        <MenuCommandList className={className} items={items} onSelect={onSelect} />
-      </MenuPopup>
-    </Menu>
+        <MenuCommandList
+          className={className}
+          items={items}
+          onSelect={(item) => {
+            setOpen(false)
+            onSelect?.(item)
+          }}
+        />
+      </PopoverPopup>
+    </Popover>
   )
 }