{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loading-splash",
  "title": "loading-splash",
  "description": "The loading family's splash: a ground layer for an app boot or a whole region with nothing to skeleton yet. A brand mark slot defaults to the Dwellir shield at /img/dwellir-mark.svg; a required label names its role=\"status\"; a delay (300 ms by default) keeps fast loads from flashing it. fill is screen (fixed) or region (fills a positioned ancestor). One quiet motion: the mark pulses slowly, or the spinner part turns; reduced motion stands still.",
  "dependencies": [
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/spinner"
  ],
  "files": [
    {
      "path": "components/brand/loading-splash.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, type ReactNode, useEffect, useState } from 'react';\nimport { Spinner } from '@/components/ui/spinner';\nimport { cn } from '@/lib/utils';\n\n/*\n * The ground a splash covers. `screen` covers the viewport for an app boot;\n * `region` fills its nearest positioned ancestor, for a panel that loads on\n * its own.\n */\nconst loadingSplashVariants = cva(\n  'flex flex-col items-center justify-center gap-4 bg-background p-6 text-center text-foreground',\n  {\n    variants: {\n      fill: {\n        screen: 'fixed inset-0 z-modal',\n        region: 'absolute inset-0',\n      },\n    },\n    defaultVariants: { fill: 'screen' },\n  },\n);\n\n/* The Dwellir shield, from the app's own brand assets. */\nfunction DefaultMark({ pulse }: { pulse: boolean }) {\n  return (\n    <img\n      data-slot=\"loading-splash-mark-image\"\n      src=\"/img/dwellir-mark.svg\"\n      alt=\"\"\n      className={cn('size-16', pulse && 'animate-pulse motion-reduce:animate-none')}\n    />\n  );\n}\n\ntype LoadingSplashProps = ComponentProps<'div'> &\n  VariantProps<typeof loadingSplashVariants> & {\n    /* Names the pending app or region for screen readers, such as \"Loading the dashboard\". */\n    label: string;\n    /* The brand mark slot. Defaults to the Dwellir shield at /img/dwellir-mark.svg. */\n    mark?: ReactNode;\n    /* Milliseconds to wait before the splash shows, so a fast load never flashes it. */\n    delay?: number;\n    /* Show the part family's Spinner under the mark instead of pulsing the mark. */\n    spinner?: boolean;\n  };\n\n/**\n * The loading family's splash: a ground layer with the brand mark, for an\n * app or a whole region with nothing to skeleton yet. It waits `delay`\n * milliseconds (300 by default) before it shows, so a fast load never\n * flashes it. One quiet motion only: the mark pulses slowly, or the Spinner\n * turns when `spinner` is set. Under reduced motion it stands still.\n * Children, when given, read as one muted line under the mark.\n */\nfunction LoadingSplash({\n  label,\n  mark,\n  delay = 300,\n  spinner = false,\n  fill,\n  className,\n  children,\n  ...props\n}: LoadingSplashProps) {\n  const [ready, setReady] = useState(delay <= 0);\n  useEffect(() => {\n    if (delay <= 0) return undefined;\n    const timer = window.setTimeout(() => setReady(true), delay);\n    return () => window.clearTimeout(timer);\n  }, [delay]);\n  if (!ready) return null;\n  return (\n    <div\n      data-slot=\"loading-splash\"\n      role=\"status\"\n      aria-label={label}\n      className={cn(loadingSplashVariants({ fill }), className)}\n      {...props}\n    >\n      <span\n        data-slot=\"loading-splash-mark\"\n        aria-hidden=\"true\"\n        className=\"flex shrink-0 motion-reduce:[&_*]:animate-none\"\n      >\n        {mark ?? <DefaultMark pulse={!spinner} />}\n      </span>\n      {spinner ? (\n        <Spinner\n          tone=\"muted\"\n          role=\"presentation\"\n          aria-hidden=\"true\"\n          aria-label={undefined}\n          className=\"motion-reduce:animate-none\"\n        />\n      ) : null}\n      {children ? (\n        <span data-slot=\"loading-splash-caption\" className=\"text-sm text-muted-foreground\">\n          {children}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport { LoadingSplash, loadingSplashVariants };\n",
      "type": "registry:component",
      "target": "components/brand/loading-splash.tsx"
    }
  ],
  "type": "registry:component"
}