{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink/welcome-screen",
  "title": "Welcome Screen",
  "description": "Two-panel welcome dashboard with titled border, logo, greeting, and sections",
  "dependencies": [
    "ink"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/ink/terminal-style.json",
    "https://termcn.dev/r/ink/types.json",
    "https://termcn.dev/r/ink/use-theme.json",
    "https://termcn.dev/r/ink/use-unicode.json"
  ],
  "files": [
    {
      "path": "registry/ui/welcome-screen.tsx",
      "content": "import { Box, Text } from \"ink\";\nimport type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport { useTheme } from \"@/hooks/use-theme\";\nimport { useUnicode } from \"@/hooks/use-unicode\";\nimport { resolveBorderStyle } from \"@/lib/terminal-style\";\nimport type { BorderStyle } from \"@/components/ui/types\";\n\nexport interface WelcomeScreenProps {\n  appName: string;\n  appNameColor?: string;\n  version?: string;\n  borderColor?: string;\n  borderStyle?: BorderStyle;\n  leftWidth?: number;\n  children: ReactNode;\n}\n\nexport interface WelcomeScreenGreetingProps {\n  children: ReactNode;\n  bold?: boolean;\n  align?: \"left\" | \"center\";\n  color?: string;\n}\n\nexport interface WelcomeScreenLogoProps {\n  children: ReactNode;\n  align?: \"left\" | \"center\";\n}\n\nexport interface WelcomeScreenMetaProps {\n  items: string[];\n  separator?: string;\n  align?: \"left\" | \"center\";\n  dim?: boolean;\n  color?: string;\n  stack?: boolean;\n}\n\nexport interface WelcomeScreenSectionProps {\n  title: string;\n  titleColor?: string;\n  titleBold?: boolean;\n  children: ReactNode;\n}\n\nconst WelcomeScreenLeft = ({ children }: { children: ReactNode }) => children;\nWelcomeScreenLeft.displayName = \"WelcomeScreen.Left\";\n\nconst WelcomeScreenRight = ({ children }: { children: ReactNode }) => children;\nWelcomeScreenRight.displayName = \"WelcomeScreen.Right\";\n\nconst WelcomeScreenGreeting = ({\n  children,\n  bold: boldText = true,\n  color,\n}: WelcomeScreenGreetingProps) => (\n  <Box paddingBottom={1}>\n    <Text bold={boldText} color={color}>\n      {children}\n    </Text>\n  </Box>\n);\n\nconst WelcomeScreenLogo = ({\n  children,\n  align = \"left\",\n}: WelcomeScreenLogoProps) => (\n  <Box\n    flexDirection=\"column\"\n    alignItems={align === \"center\" ? \"center\" : \"flex-start\"}\n    paddingY={1}\n  >\n    {typeof children === \"string\"\n      ? children.split(\"\\n\").map((line, i) => <Text key={i}>{line}</Text>)\n      : children}\n  </Box>\n);\n\nconst WelcomeScreenMeta = ({\n  items,\n  separator,\n  align = \"center\",\n  dim = false,\n  color,\n  stack = false,\n}: WelcomeScreenMetaProps) => {\n  const unicode = useUnicode();\n  const resolvedSeparator = separator ?? (unicode ? \" · \" : \" - \");\n  if (stack) {\n    return (\n      <Box\n        flexDirection=\"column\"\n        alignItems={align === \"center\" ? \"center\" : \"flex-start\"}\n        paddingTop={1}\n      >\n        {items.map((item, i) => (\n          <Text key={i} dimColor={dim} color={color}>\n            {item}\n          </Text>\n        ))}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      flexDirection=\"row\"\n      flexWrap=\"wrap\"\n      justifyContent={align === \"center\" ? \"center\" : \"flex-start\"}\n      paddingTop={1}\n    >\n      {items.map((item, i) => (\n        <Text key={i} dimColor={dim} color={color}>\n          {item}\n          {i < items.length - 1 ? resolvedSeparator : \"\"}\n        </Text>\n      ))}\n    </Box>\n  );\n};\n\nconst WelcomeScreenSection = ({\n  title,\n  titleColor,\n  titleBold = true,\n  children,\n}: WelcomeScreenSectionProps) => {\n  const theme = useTheme();\n  return (\n    <Box flexDirection=\"column\" paddingBottom={1}>\n      <Text bold={titleBold} color={titleColor ?? theme.colors.primary}>\n        {title}\n      </Text>\n      <Text>{children}</Text>\n    </Box>\n  );\n};\n\nconst WelcomeScreenRoot = ({\n  appName,\n  appNameColor,\n  version,\n  borderColor,\n  borderStyle = \"single\",\n  leftWidth = 26,\n  children,\n}: WelcomeScreenProps) => {\n  const unicode = useUnicode();\n  const theme = useTheme();\n  const resolvedBorderColor = borderColor ?? theme.colors.border;\n  const resolvedAppNameColor = appNameColor ?? theme.colors.primary;\n\n  const childArray = React.Children.toArray(children);\n  const leftChildren = childArray.filter(\n    (c) =>\n      React.isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === \"WelcomeScreen.Left\"\n  );\n  const rightChildren = childArray.filter(\n    (c) =>\n      React.isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === \"WelcomeScreen.Right\"\n  );\n\n  const leftContent = leftChildren.flatMap((c) =>\n    React.isValidElement(c)\n      ? React.Children.toArray(\n          (c.props as { children?: React.ReactNode }).children\n        )\n      : []\n  );\n  const rightContent = rightChildren.flatMap((c) =>\n    React.isValidElement(c)\n      ? React.Children.toArray(\n          (c.props as { children?: React.ReactNode }).children\n        )\n      : []\n  );\n\n  const titleStr = version ? `${appName} ${version}` : appName;\n\n  return (\n    <Box flexDirection=\"column\" aria-role=\"list\">\n      <Text aria-label={`Welcome to ${titleStr}`}>{\"\"}</Text>\n      <Box flexDirection=\"row\">\n        <Text color={resolvedBorderColor}>{unicode ? \"── \" : \"-- \"}</Text>\n        <Text color={resolvedAppNameColor} bold>\n          {titleStr}\n        </Text>\n        <Text color={resolvedBorderColor}>{unicode ? \" ─\" : \" -\"}</Text>\n      </Box>\n      <Box\n        borderStyle={resolveBorderStyle(borderStyle, unicode)}\n        borderColor={resolvedBorderColor}\n        borderTop={false}\n        flexDirection=\"row\"\n      >\n        <Box width={leftWidth} flexDirection=\"column\" paddingX={1} paddingY={1}>\n          {leftContent}\n        </Box>\n        <Box width={1} flexDirection=\"column\" alignItems=\"center\">\n          <Text color={resolvedBorderColor}>{unicode ? \"│\" : \"|\"}</Text>\n        </Box>\n        <Box flexGrow={1} flexDirection=\"column\" paddingX={1} paddingY={1}>\n          {rightContent}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\nexport const WelcomeScreen = Object.assign(WelcomeScreenRoot, {\n  Greeting: WelcomeScreenGreeting,\n  Left: WelcomeScreenLeft,\n  Logo: WelcomeScreenLogo,\n  Meta: WelcomeScreenMeta,\n  Right: WelcomeScreenRight,\n  Section: WelcomeScreenSection,\n});\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "templates"
  ],
  "type": "registry:ui"
}