{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "login-01",
  "title": "Console SSO Login",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/login-01/Login01.svelte",
      "content": "<script lang=\"ts\">\n  import {\n    ArrowRight,\n    CircleCheckBig,\n    Fingerprint,\n    KeyRound,\n    Lock,\n    Mail,\n    ShieldCheck,\n    Terminal,\n    Zap,\n  } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs'\n  import { cn } from '$lib/utils'\n\n  export interface LoginSubmitPayload {\n    method: string\n    email: string\n    password?: string\n    domain?: string\n  }\n\n  interface Login01Props {\n    class?: string\n    onsubmit?: (payload: LoginSubmitPayload) => void\n    onForgotPassword?: () => void\n    onSignUp?: () => void\n    onOauth?: (provider: 'github' | 'google') => void\n  }\n\n  let { class: className, onsubmit, onForgotPassword, onSignUp, onOauth }: Login01Props = $props()\n\n  let authMethod = $state('password')\n  let email = $state('')\n  let password = $state('')\n  let ssoDomain = $state('')\n  let isLoading = $state(false)\n  let isSubmitted = $state(false)\n\n  const isEnterpriseEmail = $derived.by(() => {\n    const parts = email.split('@')\n    if (parts.length < 2) return false\n    const domain = parts[1].toLowerCase()\n    return (\n      !!domain &&\n      !['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'icloud.com'].includes(domain) &&\n      domain.includes('.')\n    )\n  })\n\n  function handleSubmit() {\n    if (isLoading) return\n    isLoading = true\n    setTimeout(() => {\n      isLoading = false\n      isSubmitted = true\n      onsubmit?.({ method: authMethod, email, password, domain: ssoDomain })\n    }, 800)\n  }\n</script>\n\n<div data-slot=\"login-01\" class={cn('bg-background grid min-h-screen w-full grid-cols-1 lg:grid-cols-12', className)}>\n  <!-- Left Hero Brand & Proof Pane (Desktop) -->\n  <div\n    class=\"border-border bg-muted/30 relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:col-span-6 lg:flex xl:col-span-7\"\n  >\n    <!-- Background Ambient Glow -->\n\n    <div class=\"relative z-10 flex items-center gap-2.5\">\n      <div\n        class=\"bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-lg font-bold shadow-xs\"\n      >\n        <Zap class=\"size-5 fill-current\" />\n      </div>\n      <span class=\"text-foreground text-lg font-bold tracking-tight\">UIPKGE Studio</span>\n    </div>\n\n    <!-- Live Code/Terminal Showcase Widget -->\n    <div class=\"relative z-10 my-auto max-w-xl space-y-6\">\n      <div class=\"space-y-3\">\n        <div\n          class=\"border-primary/20 bg-primary/10 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs font-semibold\"\n        >\n          <Terminal class=\"size-3.5\" />\n          <span>Developer Cloud Console v4.8</span>\n        </div>\n        <h1 class=\"text-foreground text-3xl leading-tight font-bold tracking-tight xl:text-4xl\">\n          The dual-framework UI registry for mission-critical software.\n        </h1>\n        <p class=\"text-muted-foreground text-sm leading-relaxed\">\n          Own your source code without runtime dependency lock-in. Built with Tailwind CSS v4, OKLCH color spaces, and\n          headless accessibility primitives.\n        </p>\n      </div>\n\n      <!-- Terminal Widget -->\n      <div class=\"border-border bg-card overflow-hidden rounded-xl border shadow-lg\">\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"bg-destructive/60 size-2.5 rounded-full\"></span>\n            <span class=\"bg-warning/60 size-2.5 rounded-full\"></span>\n            <span class=\"bg-success/60 size-2.5 rounded-full\"></span>\n            <span class=\"text-muted-foreground ml-2 font-mono text-xs\">auth-session-init.ts</span>\n          </div>\n          <Badge variant=\"outline\" class=\"font-mono text-xs\">mTLS Encrypted</Badge>\n        </div>\n        <div class=\"bg-card/90 space-y-1 p-4 font-mono text-xs leading-relaxed\">\n          <p class=\"text-muted-foreground\">// Validating SAML 2.0 / WebAuthn identity assertion</p>\n          <p class=\"text-foreground\">\n            <span class=\"text-primary font-bold\">const</span> session =\n            <span class=\"text-primary font-bold\">await</span> auth.<span class=\"text-foreground font-semibold\"\n              >verifyCredentials</span\n            >({'{'}\n          </p>\n          <p class=\"text-foreground pl-4\">tenant: <span class=\"text-success\">'cyberdyne-systems.internal'</span>,</p>\n          <p class=\"text-foreground pl-4\">\n            protocols: [<span class=\"text-success\">'webauthn-fido2'</span>,\n            <span class=\"text-success\">'saml2-okta'</span>]\n          </p>\n          <p class=\"text-foreground\">{'}'});</p>\n          <p class=\"text-success flex items-center gap-1.5 pt-1 font-medium\">\n            <CircleCheckBig class=\"size-3.5\" />\n            <span>✓ Cryptographic identity handshaking verified (0.8ms)</span>\n          </p>\n        </div>\n      </div>\n\n      <!-- Metric Badges -->\n      <div class=\"border-border grid grid-cols-3 gap-4 border-t pt-4 text-xs\">\n        <div>\n          <p class=\"text-foreground font-mono text-lg font-bold\">99.95%</p>\n          <p class=\"text-muted-foreground\">Auth Uptime SLA</p>\n        </div>\n        <div>\n          <p class=\"text-foreground font-mono text-lg font-bold\">FIDO2</p>\n          <p class=\"text-muted-foreground\">Passkey Standard</p>\n        </div>\n        <div>\n          <p class=\"text-foreground font-mono text-lg font-bold\">SOC 2 Type II</p>\n          <p class=\"text-muted-foreground\">Certified Cloud</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"text-muted-foreground relative z-10 flex items-center justify-between text-xs\">\n      <span>© 2026 UIPKGE Inc.</span>\n      <div class=\"flex gap-4\">\n        <!-- svelte-ignore a11y_invalid_attribute: placeholder hrefs — point these at your real routes after install -->\n        <a href=\"#\" class=\"hover:text-foreground transition-colors\">Privacy Policy</a>\n        <!-- svelte-ignore a11y_invalid_attribute: placeholder hrefs — point these at your real routes after install -->\n        <a href=\"#\" class=\"hover:text-foreground transition-colors\">Terms of Service</a>\n        <!-- svelte-ignore a11y_invalid_attribute: placeholder hrefs — point these at your real routes after install -->\n        <a href=\"#\" class=\"hover:text-foreground transition-colors\">Trust Center</a>\n      </div>\n    </div>\n  </div>\n\n  <!-- Right Login Workbench Pane -->\n  <div class=\"flex flex-col items-center justify-center p-6 sm:p-12 lg:col-span-6 xl:col-span-5\">\n    <div class=\"w-full max-w-md space-y-6\">\n      <!-- Brand on mobile -->\n      <div class=\"mb-4 flex items-center gap-2 lg:hidden\">\n        <div\n          class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg font-bold shadow-xs\"\n        >\n          <Zap class=\"size-4 fill-current\" />\n        </div>\n        <span class=\"text-foreground font-bold tracking-tight\">UIPKGE Studio</span>\n      </div>\n\n      <div class=\"space-y-2\">\n        <h2 class=\"text-foreground text-2xl font-bold tracking-tight\">Sign in to console</h2>\n        <p class=\"text-muted-foreground text-xs\">Enter your credentials, passkey or company Single Sign-On.</p>\n      </div>\n\n      <!-- Social / Fast Auth Buttons -->\n      <div class=\"grid grid-cols-2 gap-3\">\n        <Button\n          variant=\"outline\"\n          type=\"button\"\n          class=\"border-border hover:bg-muted h-10 gap-2 text-xs font-semibold\"\n          onclick={() => onOauth?.('github')}\n        >\n          <!-- @lucide/svelte no longer ships brand icons — inline the GitHub mark. -->\n          <svg viewBox=\"0 0 24 24\" class=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n            />\n          </svg>\n          <span>GitHub</span>\n        </Button>\n        <Button\n          variant=\"outline\"\n          type=\"button\"\n          class=\"border-border hover:bg-muted h-10 gap-2 text-xs font-semibold\"\n          onclick={() => onOauth?.('google')}\n        >\n          <svg viewBox=\"0 0 24 24\" class=\"size-4\" aria-hidden=\"true\">\n            <path\n              fill=\"#4285F4\"\n              d=\"M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z\"\n            />\n            <path\n              fill=\"#34A853\"\n              d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n            />\n            <path\n              fill=\"#FBBC05\"\n              d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z\"\n            />\n            <path\n              fill=\"#EA4335\"\n              d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z\"\n            />\n          </svg>\n          <span>Google</span>\n        </Button>\n      </div>\n\n      <div class=\"relative\">\n        <Separator />\n        <span\n          class=\"bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-3 font-mono text-xs tracking-wider uppercase\"\n        >\n          Or continue with\n        </span>\n      </div>\n\n      <!-- Auth Method Tabs -->\n      <Tabs bind:value={authMethod} class=\"w-full\">\n        <TabsList class=\"grid h-9 w-full grid-cols-3\">\n          <TabsTrigger value=\"password\" class=\"text-xs font-medium\">Password</TabsTrigger>\n          <TabsTrigger value=\"passkey\" class=\"text-xs font-medium\">Passkey</TabsTrigger>\n          <TabsTrigger value=\"sso\" class=\"text-xs font-medium\">SAML SSO</TabsTrigger>\n        </TabsList>\n\n        <!-- Password Tab -->\n        <TabsContent value=\"password\" class=\"mt-4 space-y-4\">\n          <form\n            class=\"space-y-4\"\n            onsubmit={(e) => {\n              e.preventDefault()\n              handleSubmit()\n            }}\n          >\n            <div class=\"space-y-1.5\">\n              <Label for=\"email-input\" class=\"text-xs font-medium\">Work Email</Label>\n              <Input\n                id=\"email-input\"\n                bind:value={email}\n                type=\"email\"\n                placeholder=\"alex@company.com\"\n                autocomplete=\"email\"\n                required\n                prefixIcon={Mail}\n                class=\"h-9 text-xs\"\n              />\n              <!-- Enterprise domain detected badge -->\n              {#if isEnterpriseEmail}\n                <div class=\"text-primary mt-1 flex items-center gap-1.5 text-xs font-medium\">\n                  <ShieldCheck class=\"size-3.5\" />\n                  <span>Enterprise domain detected. Single Sign-On available.</span>\n                </div>\n              {/if}\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between\">\n                <Label for=\"pass-input\" class=\"text-xs font-medium\">Password</Label>\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-foreground text-xs transition-colors\"\n                  onclick={() => onForgotPassword?.()}\n                >\n                  Forgot password?\n                </button>\n              </div>\n              <Input\n                id=\"pass-input\"\n                bind:value={password}\n                type=\"password\"\n                placeholder=\"••••••••••••\"\n                autocomplete=\"current-password\"\n                required\n                prefixIcon={Lock}\n                class=\"h-9 text-xs\"\n              />\n            </div>\n\n            <Button type=\"submit\" class=\"h-10 w-full gap-2 text-xs font-semibold shadow-xs\" disabled={isLoading}>\n              {#if isLoading}\n                <span\n                  class=\"border-primary-foreground size-3.5 animate-spin rounded-full border-2 border-t-transparent\"\n                ></span>\n              {:else}\n                <span>Continue with Password</span>\n              {/if}\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </form>\n        </TabsContent>\n\n        <!-- Passkey Tab -->\n        <TabsContent value=\"passkey\" class=\"mt-4 space-y-4\">\n          <div class=\"border-border bg-card space-y-4 rounded-xl border p-6 text-center\">\n            <div class=\"bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full\">\n              <Fingerprint class=\"size-6\" />\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-foreground text-sm font-semibold\">Passwordless Biometric Login</p>\n              <p class=\"text-muted-foreground text-xs\">\n                Use Touch ID, Face ID, or a FIDO2 hardware security key for zero-friction sign in.\n              </p>\n            </div>\n            <Button\n              type=\"button\"\n              class=\"h-10 w-full gap-2 text-xs font-semibold shadow-xs\"\n              disabled={isLoading}\n              onclick={handleSubmit}\n            >\n              <Fingerprint class=\"size-4\" />\n              <span>{isLoading ? 'Authenticating...' : 'Sign in with Passkey'}</span>\n            </Button>\n          </div>\n        </TabsContent>\n\n        <!-- SSO Tab -->\n        <TabsContent value=\"sso\" class=\"mt-4 space-y-4\">\n          <form\n            class=\"space-y-4\"\n            onsubmit={(e) => {\n              e.preventDefault()\n              handleSubmit()\n            }}\n          >\n            <div class=\"space-y-1.5\">\n              <Label for=\"sso-domain\" class=\"text-xs font-medium\">Enterprise Domain</Label>\n              <Input\n                id=\"sso-domain\"\n                bind:value={ssoDomain}\n                type=\"text\"\n                placeholder=\"company.okta.com or domain.com\"\n                required\n                class=\"h-9 font-mono text-xs\"\n              />\n              <p class=\"text-muted-foreground text-xs\">\n                Redirects to your corporate Identity Provider (Okta, Azure AD, Ping Identity).\n              </p>\n            </div>\n\n            <Button type=\"submit\" class=\"h-10 w-full gap-2 text-xs font-semibold shadow-xs\" disabled={isLoading}>\n              <KeyRound class=\"size-3.5\" />\n              <span>Continue with SAML SSO</span>\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </form>\n        </TabsContent>\n      </Tabs>\n\n      <div class=\"text-muted-foreground text-center text-xs\">\n        Don't have a workspace account?\n        <button type=\"button\" class=\"text-primary ml-1 font-semibold hover:underline\" onclick={() => onSignUp?.()}>\n          Create free trial\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/login-01/Login01.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/separator.json",
    "https://uipkge.dev/r/svelte/tabs.json"
  ],
  "description": "Split-screen developer console authentication suite featuring brand telemetry showcases, OAuth providers, passkey biometric sign-in, and automatic enterprise SAML SSO domain detection.",
  "categories": [
    "auth"
  ]
}