{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"x-file-preview","type":"registry:ui","title":"XFilePreview","description":"Read-only render of the real text\/XML a well-known file becomes on disk \u2014 what-you-see-is-what-ships.","package":"fancy-x-files-ui","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["model.js","render.js"],"files":[{"path":"components\/fancy\/x-file-preview\/XFilePreview.tsx","content":"import { Badge, Card } from \"@particle-academy\/react-fancy\";\r\nimport { X_FILE_META, type XFileKind } from \"..\/model.js\";\r\nimport { renderXFile } from \"..\/render.js\";\r\n\r\nexport interface XFilePreviewProps {\r\n  \/** Which well-known file to preview. *\/\r\n  kind: XFileKind;\r\n  \/** The model for that file kind. *\/\r\n  model: unknown;\r\n  \/** Override the filename label shown in the header. *\/\r\n  filename?: string;\r\n  className?: string;\r\n}\r\n\r\n\/**\r\n * Renders the real text\/XML a well-known file will become on disk, using the\r\n * local render logic that mirrors the `fancy-x-files` output format. Shown in\r\n * a Card with a monospace <pre> so what you see is what ships.\r\n *\/\r\nexport function XFilePreview({\r\n  kind,\r\n  model,\r\n  filename,\r\n  className,\r\n}: XFilePreviewProps) {\r\n  const meta = X_FILE_META[kind];\r\n  const text = model != null ? renderXFile(kind, model) : \"\";\r\n\r\n  return (\r\n    <Card variant=\"outlined\" padding=\"none\" className={className}>\r\n      <Card.Header\r\n        style={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          justifyContent: \"space-between\",\r\n          padding: \"0.5rem 0.75rem\",\r\n          borderBottom: \"1px solid var(--rf-border, #e5e7eb)\",\r\n        }}\r\n      >\r\n        <code style={{ fontSize: \"0.8rem\" }} data-x-preview-name={kind}>\r\n          {filename ?? meta.filename}\r\n        <\/code>\r\n        <Badge color=\"slate\" variant=\"soft\" size=\"sm\">\r\n          preview\r\n        <\/Badge>\r\n      <\/Card.Header>\r\n      <Card.Body style={{ padding: 0 }}>\r\n        <pre\r\n          data-x-preview={kind}\r\n          style={{\r\n            margin: 0,\r\n            padding: \"0.75rem\",\r\n            fontFamily:\r\n              \"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace\",\r\n            fontSize: \"0.78rem\",\r\n            lineHeight: 1.5,\r\n            whiteSpace: \"pre-wrap\",\r\n            wordBreak: \"break-word\",\r\n            overflowX: \"auto\",\r\n          }}\r\n        >\r\n          {text || \"\u2014 empty \u2014\"}\r\n        <\/pre>\r\n      <\/Card.Body>\r\n    <\/Card>\r\n  );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/x-file-preview\/XFilePreview.tsx"}]}