{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"screen","type":"registry:ui","title":"Screen","description":"Individual screen container.","package":"fancy-screens","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/screen\/Screen.tsx","content":"import { useEffect, useMemo, type CSSProperties, type ReactNode } from \"react\";\r\nimport { ScreenContext, type ScreenContextValue } from \".\/Screen.context\";\r\nimport { useScreenSystem } from \".\/ScreenSystem.context\";\r\nimport { ScreenSystem } from \".\/ScreenSystem\";\r\nimport { renderSchema } from \".\/schema\";\r\nimport type { ScreenBodyProps, ScreenProps } from \".\/Screen.types\";\r\n\r\nfunction ScreenBody({ children, className }: ScreenBodyProps) {\r\n  return <div data-fancy-screens-body=\"\" className={className}>{children}<\/div>;\r\n}\r\nScreenBody.displayName = \"Screen.Body\";\r\n\r\n\/**\r\n * Containerized application surface. Registers with the enclosing\r\n * `<Screen.System>` so agents and presence layers can enumerate and\r\n * target it.\r\n *\r\n * Supports two render modes:\r\n *   - JSX children  \u2014 pass any React tree\r\n *   - schema prop   \u2014 agent-emitted JSON, rendered via the schema registry\r\n *\r\n * Children win if both are provided.\r\n *\/\r\nfunction ScreenRoot({ id, title, children, schema, className }: ScreenProps) {\r\n  const system = useScreenSystem();\r\n\r\n  useEffect(() => {\r\n    system.registerScreen({\r\n      id,\r\n      title,\r\n      lifecycle: \"active\",\r\n      storeKeys: [],\r\n      lastActiveAt: Date.now(),\r\n    });\r\n    return () => system.unregisterScreen(id);\r\n    \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\r\n  }, [id]);\r\n\r\n  \/\/ Patch title without remounting the registry entry.\r\n  useEffect(() => {\r\n    if (title !== undefined) system.updateScreen(id, { title });\r\n    \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\r\n  }, [id, title]);\r\n\r\n  \/\/ Read the live agentActivity for this screen so we can apply a CSS\r\n  \/\/ class while it's set. Subscribers (e.g. agent-integrations) push\r\n  \/\/ updates via system.updateScreen(id, { agentActivity }).\r\n  const meta = system.registry.get(id);\r\n  const agentActivity = meta?.agentActivity;\r\n\r\n  const ctx = useMemo<ScreenContextValue>(\r\n    () => ({ id, title, lifecycle: \"active\" }),\r\n    [id, title],\r\n  );\r\n\r\n  const classes = [\r\n    className,\r\n    agentActivity ? \"agent-focused-element\" : null,\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  const style: CSSProperties | undefined = agentActivity?.agentColor\r\n    ? ({ [\"--agent-color\" as unknown as keyof CSSProperties]: agentActivity.agentColor } as CSSProperties)\r\n    : undefined;\r\n\r\n  const body = children ?? (schema ? renderSchema(schema) : null);\r\n\r\n  return (\r\n    <ScreenContext.Provider value={ctx}>\r\n      <div\r\n        data-fancy-screens-screen=\"\"\r\n        data-screen-id={id}\r\n        className={classes || undefined}\r\n        style={style}\r\n      >\r\n        {body}\r\n      <\/div>\r\n    <\/ScreenContext.Provider>\r\n  );\r\n}\r\n\r\nScreenRoot.displayName = \"Screen\";\r\n\r\nexport const Screen = Object.assign(ScreenRoot, {\r\n  Body: ScreenBody,\r\n  System: ScreenSystem,\r\n});\r\n\r\nexport type { ScreenProps, ScreenBodyProps } from \".\/Screen.types\";\r\n","type":"registry:ui","target":"components\/fancy\/screen\/Screen.tsx"}]}