{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bezel",
  "type": "registry:ui",
  "title": "Bezel",
  "description": "An inset gadget's body: a frame in the body's material around an opening, where a glass face sits sunk below it, shaded by the frame's inner wall. Light inside the glass sits between the glass and its surface.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json",
    "https://metalui.dev/r/gadgets.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/bezel/bezel.tsx",
      "type": "registry:ui",
      "target": "components/metalui/bezel/bezel.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { GADGETS, type GadgetMaterial } from '../../gadgets/gadgets.generated';\nimport { drawBezel } from '../../gadgets/parts/bezel';\nimport { drawGlass } from '../../gadgets/parts/glass';\nimport { tierFor, type Host } from '../../gadgets/light';\nimport { useHost } from '../../gadgets/host';\n\n/* Bezel (a Part): an inset gadget's body. A frame in the body's material around an opening, where a\n * glass face sits sunk below it, shaded by the frame's inner wall. Anything that glows in the glass\n * (children: a Backlight's light) sits between the glass and its surface (rings, rim, glare), so it\n * reads as inside it. Geometry is on the 400-unit canvas; `size` is drawn pixels. */\n\nexport interface BezelProps extends Omit<React.SVGProps<SVGSVGElement>, 'color'> {\n  material?: Extract<GadgetMaterial, 'stone' | 'metal' | 'clay'>;\n  /** The frame's pigment, OKLCH. Defaults to the material's own sample. */\n  color?: { L: number; C: number; H: number };\n  /** The glass's colour, OKLCH (a gadget's resolved face). Defaults to plain icy glass. */\n  glass?: { L: number; C: number; H: number };\n  opening?: 'round' | 'square';\n  /** The frame at its narrowest, units. */\n  width?: number;\n  rings?: boolean;\n  size?: number;\n  host?: Host;\n  /** Light inside the glass, drawn on the 400-unit canvas. */\n  children?: React.ReactNode;\n}\n\nconst sample = (m: GadgetMaterial) => {\n  const f = GADGETS.materials[m] as unknown as { L: readonly [number, number]; CCap: number; sample: number };\n  return { L: Math.min(f.L[1], Math.max(f.L[0], 0.72)), C: Math.min(f.CCap, 0.06), H: f.sample };\n};\nconst plainGlass = () => {\n  const g = GADGETS.materials.glass as unknown as { faceL: readonly [number, number]; faceCCap: number; sample: number };\n  return { L: (g.faceL[0] + g.faceL[1]) / 2, C: g.faceCCap / 2, H: g.sample };\n};\n\nexport function Bezel({ material = 'stone', color, glass, opening = 'round', width, rings = true, size = 160, host: forced, children, ...props }: BezelProps) {\n  const ref = React.useRef<SVGSVGElement>(null);\n  const { host } = useHost(ref, forced);\n  const uid = React.useId().replace(/:/g, '');\n  const tier = tierFor(size);\n  const frame = color ?? sample(material), face = glass ?? plainGlass();\n  const d = React.useMemo(() => {\n    const b = drawBezel(`bezel-${uid}`, { material, color: frame, opening, width }, { tier, host });\n    const g = drawGlass(`glass-${uid}`, { at: b.opening.at, size: b.opening.size, shape: b.opening.shape, color: face, rings }, { tier });\n    return { b, g };\n  }, [uid, material, frame.L, frame.C, frame.H, face.L, face.C, face.H, opening, width, rings, tier, host]); // eslint-disable-line react-hooks/exhaustive-deps\n  return (\n    <svg ref={ref} viewBox=\"0 0 400 400\" width={size} height={size} role=\"img\" aria-label={`${material} bezel with a glass face`}\n      data-material={material} data-tier={tier} data-host={host} data-opening={opening} className=\"overflow-visible\" {...props}>\n      <defs dangerouslySetInnerHTML={{ __html: d.b.defs + d.g.defs }} />\n      {/* The face, sunk: the glass, the light in it, its surface, all under the frame's wall shadow. */}\n      <g filter={d.b.wall ? `url(#${d.b.wall})` : undefined} data-part=\"bezel.face\">\n        <g dangerouslySetInnerHTML={{ __html: d.g.glass }} />\n        <g clipPath={`url(#${d.g.clip})`} data-part=\"bezel.light\">{children}</g>\n        <g dangerouslySetInnerHTML={{ __html: d.g.surface }} />\n      </g>\n      <g dangerouslySetInnerHTML={{ __html: d.b.frame }} />\n    </svg>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/bezel.md. SwiftUI: MetalBezel in the MetalUI Swift package."
}