{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"humans-txt-editor","type":"registry:ui","title":"HumansTxtEditor","description":"humans.txt editor \u2014 team credits, thanks, and site colophon.","package":"fancy-x-files-ui","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["model.js","validate.js"],"files":[{"path":"components\/fancy\/humans-txt-editor\/HumansTxtEditor.tsx","content":"import { Button, Input, Textarea } from \"@particle-academy\/react-fancy\";\r\nimport type { HumansTxtEntry, HumansTxtModel } from \"..\/model.js\";\r\nimport { validateHumansTxt } from \"..\/validate.js\";\r\nimport { IssueList, Section, StringList } from \".\/internal.js\";\r\n\r\nexport interface HumansTxtEditorProps {\r\n  value: HumansTxtModel;\r\n  onChange: (next: HumansTxtModel) => void;\r\n  hideIssues?: boolean;\r\n  className?: string;\r\n}\r\n\r\n\/** Controlled humans.txt editor: team credits + thanks + site colophon. *\/\r\nexport function HumansTxtEditor({\r\n  value,\r\n  onChange,\r\n  hideIssues,\r\n  className,\r\n}: HumansTxtEditorProps) {\r\n  const issues = validateHumansTxt(value);\r\n  const patch = (next: Partial<HumansTxtModel>) =>\r\n    onChange({ ...value, ...next });\r\n\r\n  const updateMember = (index: number, next: Partial<HumansTxtEntry>) =>\r\n    patch({\r\n      team: value.team.map((m, i) => (i === index ? { ...m, ...next } : m)),\r\n    });\r\n\r\n  const addMember = () =>\r\n    patch({ team: [...value.team, { role: \"\", name: \"\" }] });\r\n\r\n  const removeMember = (index: number) =>\r\n    patch({ team: value.team.filter((_, i) => i !== index) });\r\n\r\n  return (\r\n    <div className={className} data-x-editor=\"humansTxt\">\r\n      <Section\r\n        title=\"Team\"\r\n        handle=\"humans-team\"\r\n        action={\r\n          <Button\r\n            type=\"button\"\r\n            variant=\"ghost\"\r\n            onClick={addMember}\r\n            data-x-add=\"humans-member\"\r\n          >\r\n            Add person\r\n          <\/Button>\r\n        }\r\n      >\r\n        {value.team.map((member, i) => (\r\n          <div\r\n            key={i}\r\n            data-x-member={i}\r\n            style={{\r\n              display: \"flex\",\r\n              gap: \"0.4rem\",\r\n              alignItems: \"end\",\r\n              flexWrap: \"wrap\",\r\n            }}\r\n          >\r\n            <div style={{ flex: \"1 1 7rem\" }}>\r\n              <Input\r\n                label={i === 0 ? \"Role\" : undefined}\r\n                value={member.role}\r\n                onValueChange={(role) => updateMember(i, { role })}\r\n                placeholder=\"Developer\"\r\n                data-x-input={`humans-role:${i}`}\r\n              \/>\r\n            <\/div>\r\n            <div style={{ flex: \"1 1 8rem\" }}>\r\n              <Input\r\n                label={i === 0 ? \"Name\" : undefined}\r\n                value={member.name}\r\n                onValueChange={(name) => updateMember(i, { name })}\r\n                placeholder=\"Ada Lovelace\"\r\n                data-x-input={`humans-name:${i}`}\r\n              \/>\r\n            <\/div>\r\n            <div style={{ flex: \"1 1 8rem\" }}>\r\n              <Input\r\n                label={i === 0 ? \"Contact\" : undefined}\r\n                value={member.contact ?? \"\"}\r\n                onValueChange={(v) =>\r\n                  updateMember(i, { contact: v || undefined })\r\n                }\r\n                placeholder=\"@handle\"\r\n                data-x-input={`humans-contact:${i}`}\r\n              \/>\r\n            <\/div>\r\n            <Button\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              color=\"red\"\r\n              onClick={() => removeMember(i)}\r\n              data-x-remove={`humans-member:${i}`}\r\n            >\r\n              \u00d7\r\n            <\/Button>\r\n          <\/div>\r\n        ))}\r\n      <\/Section>\r\n\r\n      <Section title=\"Thanks\" handle=\"humans-thanks\">\r\n        <StringList\r\n          handle=\"humans-thanks\"\r\n          values={value.thanks ?? []}\r\n          onChange={(thanks) => patch({ thanks: thanks.length ? thanks : undefined })}\r\n          placeholder=\"Open-source maintainers\"\r\n        \/>\r\n      <\/Section>\r\n\r\n      <Section title=\"Site\" handle=\"humans-site\">\r\n        <Textarea\r\n          value={value.site ?? \"\"}\r\n          onValueChange={(v) => patch({ site: v || undefined })}\r\n          placeholder={\"Standards: HTML5, CSS3\\nComponents: react-fancy\"}\r\n          data-x-input=\"humans-site\"\r\n        \/>\r\n      <\/Section>\r\n\r\n      {hideIssues ? null : <IssueList issues={issues} testid=\"humansTxt\" \/>}\r\n    <\/div>\r\n  );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/humans-txt-editor\/HumansTxtEditor.tsx"}]}