{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "panel-pair",
  "title": "PanelPair",
  "description": "Pairs two related panels across a shared 12px slanted gutter (slant-bottom over slant-top).",
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json",
    "https://frame12.dev/r/use-on-twos.json",
    "https://frame12.dev/r/use-tempo.json",
    "https://frame12.dev/r/scene.json",
    "https://frame12.dev/r/panel.json"
  ],
  "files": [
    {
      "path": "ui/panel-pair.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Panel, usePanelVariantContext, type PanelProps, type PanelVariant } from './panel';\nimport { resolveAreaProps } from './scene';\n\n// Bundlers (Next.js, webpack, Vite) statically replace `process.env.NODE_ENV`. Declared locally so\n// consumers without @types/node (e.g. Vite's react-ts template) still type-check this file.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nexport interface PanelPairProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: PanelVariant;\n  area?: string;\n  top?: Omit<PanelProps, 'shape'>;\n  bottom?: Omit<PanelProps, 'shape'>;\n  topCut?: string | false;\n  bottomCut?: string | false;\n  topLabel?: string;\n  bottomLabel?: string;\n  children?: React.ReactNode;\n}\n\nexport const PanelPair = React.forwardRef<HTMLDivElement, PanelPairProps>(function PanelPair(\n  {\n    variant,\n    area,\n    top,\n    bottom,\n    topCut,\n    bottomCut,\n    topLabel,\n    bottomLabel,\n    className = '',\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const inheritedVariant = usePanelVariantContext();\n  const effectivePairVariant: PanelVariant = variant ?? inheritedVariant ?? 'expressive';\n  const classes = `f12-pair${className ? ` ${className}` : ''}`;\n  const areaProps = resolveAreaProps(area, style);\n\n  if (top && bottom) {\n    const topVariant = top.variant ?? effectivePairVariant;\n    const bottomVariant = bottom.variant ?? effectivePairVariant;\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        data-area={areaProps['data-area']}\n        style={areaProps.style}\n        {...rest}\n      >\n        <Panel\n          {...top}\n          cut={top.cut ?? topCut}\n          label={top.label ?? topLabel}\n          variant={topVariant}\n          shape={topVariant === 'quiet' ? 'rect' : 'slant-bottom'}\n        />\n        <Panel\n          {...bottom}\n          cut={bottom.cut ?? bottomCut}\n          label={bottom.label ?? bottomLabel}\n          variant={bottomVariant}\n          shape={bottomVariant === 'quiet' ? 'rect' : 'slant-top'}\n        />\n      </div>\n    );\n  }\n\n  const items = React.Children.toArray(children);\n  if (process.env.NODE_ENV !== 'production' && items.length > 2) {\n    console.warn(\n      `[FRAME/12 PanelPair] Expected at most 2 children (top and bottom panels), received ${items.length}. Extra children will not be rendered.`,\n    );\n  }\n  const first = items[0];\n  const second = items[1];\n\n  const renderSlot = (\n    node: React.ReactNode,\n    slantShape: 'slant-bottom' | 'slant-top',\n    fallbackCut?: string | false,\n    fallbackLabel?: string,\n  ) => {\n    if (React.isValidElement<PanelProps>(node) && node.type === Panel) {\n      const slotVariant = node.props.variant ?? effectivePairVariant;\n      const defaultShape = slotVariant === 'quiet' ? 'rect' : slantShape;\n      return React.cloneElement(node, {\n        variant: slotVariant,\n        shape: node.props.shape && node.props.shape !== 'rect' ? node.props.shape : defaultShape,\n        cut: node.props.cut ?? fallbackCut,\n        label: node.props.label ?? fallbackLabel,\n      });\n    }\n    const slotVariant = effectivePairVariant;\n    return (\n      <Panel\n        variant={slotVariant}\n        shape={slotVariant === 'quiet' ? 'rect' : slantShape}\n        cut={fallbackCut}\n        label={fallbackLabel}\n      >\n        {node}\n      </Panel>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      data-area={areaProps['data-area']}\n      style={areaProps.style}\n      {...rest}\n    >\n      {first !== undefined && renderSlot(first, 'slant-bottom', topCut, topLabel)}\n      {second !== undefined && renderSlot(second, 'slant-top', bottomCut, bottomLabel)}\n    </div>\n  );\n});\n",
      "type": "registry:ui",
      "target": "components/frame12/panel-pair.tsx"
    }
  ],
  "type": "registry:ui"
}