@hanzo/ui 8.32.3 → 8.33.0

package/dist/auth/SignInPanel.cjs

@@ -7,11 +7,9 @@ const react_1 = require("react");
 const react_2 = require("@hanzo/i18n/react");
 const react_3 = require("@hanzo/iam/react");
 const react_simple_icons_1 = require("@icons-pack/react-simple-icons");
-const button_1 = require("../backends/gui/button.cjs");
-const field_1 = require("../backends/gui/field.cjs");
-const input_1 = require("../backends/gui/input.cjs");
 const layout_1 = require("../backends/gui/layout.cjs");
 const handoff_1 = require("./handoff.cjs");
+const look_1 = require("./look.cjs");
 const NAME = { google: 'Google', github: 'GitHub' };
 function SignInPanel(props) {
     return props.request ? (0, jsx_runtime_1.jsx)(Panel, { ...props, mint: props.request }) : (0, jsx_runtime_1.jsx)(UnderProvider, { ...props });
@@ -21,9 +19,10 @@ function UnderProvider(props) {
     const { sdk } = (0, react_3.useIam)();
     return (0, jsx_runtime_1.jsx)(Panel, { ...props, mint: (params) => sdk.getSigninUrl(params) });
 }
-function Panel({ title, line, providers = ['google', 'github'], signin = handoff_1.SIGNIN, signup = true, termsHref = 'https://hanzo.ai/terms', privacyHref = 'https://hanzo.ai/privacy', authorize = (u) => u, track, mint, background = '$background', borderColor = '$borderColor', bare = false, }) {
+function Panel({ title, line, providers = ['google', 'github'], signin = handoff_1.SIGNIN, signup = false, termsHref = 'https://hanzo.ai/terms', privacyHref = 'https://hanzo.ai/privacy', authorize = (u) => u, track, mint, background = '$background', borderColor = '$borderColor', bare = false, }) {
     const { t } = (0, react_2.useI18n)();
     const [email, setEmail] = (0, react_1.useState)('');
+    const [emailOpen, setEmailOpen] = (0, react_1.useState)(false);
     const [busy, setBusy] = (0, react_1.useState)(null);
     const [wrong, setWrong] = (0, react_1.useState)(null);
     /** Mint this site's own request, then leave for where `way` goes. */
@@ -49,9 +48,12 @@ function Panel({ title, line, providers = ['google', 'github'], signin = handoff
         }
         void leave('email', { kind: 'email', email: typed }, typed);
     }
-    const card = bare ? {} : { bg: background, borderWidth: 1, borderColor, rounded: '$6', p: '$6' };
-    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { "data-slot": "signin-panel", "data-surface": bare ? 'bare' : 'card', width: "100%", maxW: bare ? 400 : 448, items: "center", gap: "$4", ...card, children: [title ? ((0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, text: "center", children: title })) : null, line ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$3", color: "$quiet", m: 0, text: "center", maxW: 360, children: line })) : null, (0, jsx_runtime_1.jsx)(layout_1.YStack, { width: "100%", gap: "$2.5", mt: title || line ? '$2' : 0, children: providers.map((p) => ((0, jsx_runtime_1.jsxs)(button_1.Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", width: "100%", disabled: busy !== null, onClick: () => void leave(p, { kind: 'provider', provider: p }), children: [p === 'google' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGoogle, { size: 16 }) : (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGithub, { size: 16 }), t('Continue with {provider}', { provider: NAME[p] })] }, p))) }), providers.length ? ((0, jsx_runtime_1.jsx)(layout_1.YStack, { width: "100%", children: (0, jsx_runtime_1.jsx)(field_1.FieldSeparator, { children: t('or') }) })) : null, (0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: withEmail, noValidate: true }), width: "100%", gap: "$3", children: [(0, jsx_runtime_1.jsx)(field_1.Field, { gap: "$2", children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-signin-email", type: "email", name: "email", autoComplete: "username", "aria-label": t('Email'), value: email, onChangeText: setEmail, placeholder: "you@company.com" }) }), wrong ? (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: t(wrong) }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", size: "lg", rounded: "$10", width: "100%", bg: "$ink", color: "$background", borderColor: "$ink", hoverStyle: { opacity: 0.92 }, disabled: busy !== null, children: t('Continue with email') })] }), signup ? ((0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$2", color: "$quiet", m: 0, children: [`${t('New to Hanzo?')} `, (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "link", size: "sm", px: 0, height: "auto", disabled: busy !== null, onClick: () => void leave('signup', { kind: 'signup' }), children: t('Create account') })] })) : null, (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", m: 0, text: "center", maxW: 400, children: t("By continuing, you agree to Hanzo's {terms} and {privacy}.", {
-                    terms: ((0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: termsHref, color: "$ink", textDecorationLine: "underline", children: t('Terms') })),
-                    privacy: ((0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: privacyHref, color: "$ink", textDecorationLine: "underline", children: t('Privacy Policy') })),
+    const emailLabel = t(busy === 'email' ? 'One moment…' : 'Continue with email');
+    return ((0, jsx_runtime_1.jsxs)(look_1.SignInCard, { background: background, borderColor: borderColor, bare: bare, children: [title ? ((0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, text: "center", children: title })) : null, line ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$3", color: "$quiet", m: 0, text: "center", maxW: 360, children: line })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-signin-body": "", style: title || line ? { marginTop: 12 } : undefined, children: [providers.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-signin-pair": "", children: providers.map((p) => ((0, jsx_runtime_1.jsxs)("button", { "data-signin-btn": "", type: "button", disabled: busy !== null, onClick: () => void leave(p, { kind: 'provider', provider: p }), children: [p === 'google' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGoogle, { size: 17, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGithub, { size: 17, "aria-hidden": true }), t('Continue with {provider}', { provider: NAME[p] })] }, p))) }), (0, jsx_runtime_1.jsx)("div", { "data-signin-or": "", children: t('or') })] })) : null, emailOpen ? ((0, jsx_runtime_1.jsxs)("form", { "data-signin-form": "", onSubmit: withEmail, noValidate: true, children: [(0, jsx_runtime_1.jsx)("input", { id: "hanzo-signin-email", "data-signin-field": "", type: "email", name: "email", autoComplete: "username", "aria-label": t('Email'), "aria-invalid": wrong ? true : undefined, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com", autoFocus: true }), wrong ? ((0, jsx_runtime_1.jsx)("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, (0, jsx_runtime_1.jsx)("button", { "data-signin-btn": "", "data-solid": "", type: "submit", disabled: busy !== null, children: emailLabel })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wrong ? ((0, jsx_runtime_1.jsx)("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, (0, jsx_runtime_1.jsx)("button", { "data-signin-btn": "", "data-solid": "", type: "button", disabled: busy !== null, onClick: () => {
+                                    setWrong(null);
+                                    setEmailOpen(true);
+                                }, children: emailLabel })] }))] }), signup ? ((0, jsx_runtime_1.jsxs)("p", { "data-signin-quiet": "", children: [`${t('New to Hanzo?')} `, (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: busy !== null, onClick: () => void leave('signup', { kind: 'signup' }), children: t('Create account') })] })) : null, (0, jsx_runtime_1.jsx)("p", { "data-signin-terms": "", children: t("By continuing, you agree to Hanzo's {terms} and {privacy}.", {
+                    terms: (0, jsx_runtime_1.jsx)("a", { href: termsHref, children: t('Terms') }),
+                    privacy: (0, jsx_runtime_1.jsx)("a", { href: privacyHref, children: t('Privacy Policy') }),
                 }) })] }));
 }

package/dist/auth/SignInPanel.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps, type ReactNode } from 'react';
-import { YStack } from '../backends/gui/layout.js';
+import { type ReactNode } from 'react';
 import { type ProviderKind } from './handoff.js';
+import { type SignInCardProps } from './look.js';
 /**
  * The sign-in a Hanzo site draws on its own front page (hanzo.app, hanzo.bot,
  * hanzo.team), shared so every site asks the same way and leaves the same way.
@@ -13,15 +13,22 @@ import { type ProviderKind } from './handoff.js';
  * hanzo.ai/signup. The session that answers is hanzo.ai's, so a person signed in
  * on any Hanzo site is not asked again.
  *
- * Drawn from @hanzo/ui components in the theme's tokens; the host mounts its
- * GuiProvider and imports no stylesheet. Framework-free: a Next export and a Vite
- * app draw it alike.
+ * It is drawn as hanzo.app's own front-page sign-in (hanzo-inc/app
+ * components/auth/steps.tsx `HERO_STYLE`), rule for rule, so the sites read as one
+ * product's: the providers side by side, then one solid Continue with email that
+ * opens the address field when pressed, and no sign-up line (hanzo.ai/login offers
+ * one). The card and its rules are ./look.tsx's `SignInCard`, which hanzo.ai's
+ * own sign-in (/login, /signup) is drawn on too, so the door and the page it
+ * opens onto read alike: the host mounts its GuiProvider and imports no sheet.
+ * Framework-free: a Next export and a Vite app draw it alike.
  *
  * It stands on its own card, a solid ground inside a hairline, since a front page
  * draws it over a busy backdrop (hanzo.team's dot field showed through the
- * providers' tinted buttons and the field). The card is the site's to colour
- * (`background`, `borderColor`: a theme token or any CSS colour), and `bare` drops
- * it for a host that sets the panel in a card of its own.
+ * buttons and the field). The card is the site's to colour (`background`,
+ * `borderColor`: a theme token or any CSS colour), and `bare` drops it for a host
+ * that sets the panel in a card of its own. Inside the card the controls keep
+ * hanzo.app's 400px measure, so the card is 464px wide; under 380px of room the
+ * providers stack.
  */
 export interface SignInPanelProps {
     /** The headline: `Sign in to Hanzo Team`. Omit to draw the panel alone under the host's own. */
@@ -32,7 +39,7 @@ export interface SignInPanelProps {
     providers?: ProviderKind[];
     /** The origin people sign in on. Default https://hanzo.ai. */
     signin?: string;
-    /** Offer "Create account". Default true. */
+    /** Offer "Create account" under the form. Default false: hanzo.app's sign-in has none, and hanzo.ai/login offers it. */
     signup?: boolean;
     termsHref?: string;
     privacyHref?: string;
@@ -58,7 +65,7 @@ type Mint = (params?: {
     additionalParams?: Record<string, string>;
 }) => Promise<string>;
 /** A colour the card takes, as the stack it is drawn on takes one. */
-type Paint = ComponentProps<typeof YStack>['bg'];
+type Paint = SignInCardProps['background'];
 export declare function SignInPanel(props: SignInPanelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=SignInPanel.d.ts.map

package/dist/auth/SignInPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignInPanel.d.ts","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,cAAc,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOrF,OAAO,EAA8B,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC3E,OAAO,EAA4B,KAAK,YAAY,EAAY,MAAM,WAAW,CAAA;AAEjF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,gGAAgG;IAChG,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,oEAAoE;IACpE,SAAS,CAAC,EAAE,YAAY,EAAE,CAAA;IAC1B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,gEAAgE;IAChE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,KAAK,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;AAEvF,sEAAsE;AACtE,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;AAIhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD"}
+{"version":3,"file":"SignInPanel.d.ts","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKhE,OAAO,EAA4B,KAAK,YAAY,EAAY,MAAM,WAAW,CAAA;AACjF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,gBAAgB;IAC/B,gGAAgG;IAChG,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,oEAAoE;IACpE,SAAS,CAAC,EAAE,YAAY,EAAE,CAAA;IAC1B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wHAAwH;IACxH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,gEAAgE;IAChE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,KAAK,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;AAEvF,sEAAsE;AACtE,KAAK,KAAK,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;AAI1C,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD"}

package/dist/auth/SignInPanel.js

@@ -1,14 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useI18n } from '@hanzo/i18n/react';
 import { useIam } from '@hanzo/iam/react';
 import { SiGithub, SiGoogle } from '@icons-pack/react-simple-icons';
-import { Button } from '../backends/gui/button.js';
-import { Field, FieldError, FieldSeparator } from '../backends/gui/field.js';
-import { Input } from '../backends/gui/input.js';
-import { Anchor, Heading, Paragraph, YStack } from '../backends/gui/layout.js';
+import { Heading, Paragraph } from '../backends/gui/layout.js';
 import { address, handoff, SIGNIN } from './handoff.js';
+import { SignInCard } from './look.js';
 const NAME = { google: 'Google', github: 'GitHub' };
 export function SignInPanel(props) {
     return props.request ? _jsx(Panel, { ...props, mint: props.request }) : _jsx(UnderProvider, { ...props });
@@ -18,9 +16,10 @@ function UnderProvider(props) {
     const { sdk } = useIam();
     return _jsx(Panel, { ...props, mint: (params) => sdk.getSigninUrl(params) });
 }
-function Panel({ title, line, providers = ['google', 'github'], signin = SIGNIN, signup = true, termsHref = 'https://hanzo.ai/terms', privacyHref = 'https://hanzo.ai/privacy', authorize = (u) => u, track, mint, background = '$background', borderColor = '$borderColor', bare = false, }) {
+function Panel({ title, line, providers = ['google', 'github'], signin = SIGNIN, signup = false, termsHref = 'https://hanzo.ai/terms', privacyHref = 'https://hanzo.ai/privacy', authorize = (u) => u, track, mint, background = '$background', borderColor = '$borderColor', bare = false, }) {
     const { t } = useI18n();
     const [email, setEmail] = useState('');
+    const [emailOpen, setEmailOpen] = useState(false);
     const [busy, setBusy] = useState(null);
     const [wrong, setWrong] = useState(null);
     /** Mint this site's own request, then leave for where `way` goes. */
@@ -46,10 +45,13 @@ function Panel({ title, line, providers = ['google', 'github'], signin = SIGNIN,
         }
         void leave('email', { kind: 'email', email: typed }, typed);
     }
-    const card = bare ? {} : { bg: background, borderWidth: 1, borderColor, rounded: '$6', p: '$6' };
-    return (_jsxs(YStack, { "data-slot": "signin-panel", "data-surface": bare ? 'bare' : 'card', width: "100%", maxW: bare ? 400 : 448, items: "center", gap: "$4", ...card, children: [title ? (_jsx(Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, text: "center", children: title })) : null, line ? (_jsx(Paragraph, { size: "$3", color: "$quiet", m: 0, text: "center", maxW: 360, children: line })) : null, _jsx(YStack, { width: "100%", gap: "$2.5", mt: title || line ? '$2' : 0, children: providers.map((p) => (_jsxs(Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", width: "100%", disabled: busy !== null, onClick: () => void leave(p, { kind: 'provider', provider: p }), children: [p === 'google' ? _jsx(SiGoogle, { size: 16 }) : _jsx(SiGithub, { size: 16 }), t('Continue with {provider}', { provider: NAME[p] })] }, p))) }), providers.length ? (_jsx(YStack, { width: "100%", children: _jsx(FieldSeparator, { children: t('or') }) })) : null, _jsxs(YStack, { render: _jsx("form", { onSubmit: withEmail, noValidate: true }), width: "100%", gap: "$3", children: [_jsx(Field, { gap: "$2", children: _jsx(Input, { id: "hanzo-signin-email", type: "email", name: "email", autoComplete: "username", "aria-label": t('Email'), value: email, onChangeText: setEmail, placeholder: "you@company.com" }) }), wrong ? _jsx(FieldError, { children: t(wrong) }) : null, _jsx(Button, { type: "submit", size: "lg", rounded: "$10", width: "100%", bg: "$ink", color: "$background", borderColor: "$ink", hoverStyle: { opacity: 0.92 }, disabled: busy !== null, children: t('Continue with email') })] }), signup ? (_jsxs(Paragraph, { size: "$2", color: "$quiet", m: 0, children: [`${t('New to Hanzo?')} `, _jsx(Button, { type: "button", variant: "link", size: "sm", px: 0, height: "auto", disabled: busy !== null, onClick: () => void leave('signup', { kind: 'signup' }), children: t('Create account') })] })) : null, _jsx(Paragraph, { size: "$1", color: "$quiet", m: 0, text: "center", maxW: 400, children: t("By continuing, you agree to Hanzo's {terms} and {privacy}.", {
-                    terms: (_jsx(Anchor, { href: termsHref, color: "$ink", textDecorationLine: "underline", children: t('Terms') })),
-                    privacy: (_jsx(Anchor, { href: privacyHref, color: "$ink", textDecorationLine: "underline", children: t('Privacy Policy') })),
+    const emailLabel = t(busy === 'email' ? 'One moment…' : 'Continue with email');
+    return (_jsxs(SignInCard, { background: background, borderColor: borderColor, bare: bare, children: [title ? (_jsx(Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, text: "center", children: title })) : null, line ? (_jsx(Paragraph, { size: "$3", color: "$quiet", m: 0, text: "center", maxW: 360, children: line })) : null, _jsxs("div", { "data-signin-body": "", style: title || line ? { marginTop: 12 } : undefined, children: [providers.length ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-signin-pair": "", children: providers.map((p) => (_jsxs("button", { "data-signin-btn": "", type: "button", disabled: busy !== null, onClick: () => void leave(p, { kind: 'provider', provider: p }), children: [p === 'google' ? _jsx(SiGoogle, { size: 17, "aria-hidden": true }) : _jsx(SiGithub, { size: 17, "aria-hidden": true }), t('Continue with {provider}', { provider: NAME[p] })] }, p))) }), _jsx("div", { "data-signin-or": "", children: t('or') })] })) : null, emailOpen ? (_jsxs("form", { "data-signin-form": "", onSubmit: withEmail, noValidate: true, children: [_jsx("input", { id: "hanzo-signin-email", "data-signin-field": "", type: "email", name: "email", autoComplete: "username", "aria-label": t('Email'), "aria-invalid": wrong ? true : undefined, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com", autoFocus: true }), wrong ? (_jsx("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, _jsx("button", { "data-signin-btn": "", "data-solid": "", type: "submit", disabled: busy !== null, children: emailLabel })] })) : (_jsxs(_Fragment, { children: [wrong ? (_jsx("p", { "data-signin-wrong": "", role: "alert", children: t(wrong) })) : null, _jsx("button", { "data-signin-btn": "", "data-solid": "", type: "button", disabled: busy !== null, onClick: () => {
+                                    setWrong(null);
+                                    setEmailOpen(true);
+                                }, children: emailLabel })] }))] }), signup ? (_jsxs("p", { "data-signin-quiet": "", children: [`${t('New to Hanzo?')} `, _jsx("button", { type: "button", disabled: busy !== null, onClick: () => void leave('signup', { kind: 'signup' }), children: t('Create account') })] })) : null, _jsx("p", { "data-signin-terms": "", children: t("By continuing, you agree to Hanzo's {terms} and {privacy}.", {
+                    terms: _jsx("a", { href: termsHref, children: t('Terms') }),
+                    privacy: _jsx("a", { href: privacyHref, children: t('Privacy Policy') }),
                 }) })] }));
 }
 //# sourceMappingURL=SignInPanel.js.map

package/dist/auth/SignInPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInPanel.js","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SignInPanel.js","sourceRoot":"","sources":["../../src/auth/SignInPanel.tsx"],"names":[],"mappings":"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"}

package/dist/auth/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.refresher = exports.live = exports.bearer = exports.useSignOut = exports.signOut = exports.SIGNIN = exports.handoff = exports.address = exports.SignInPanel = exports.SignIn = void 0;
+exports.refresher = exports.live = exports.bearer = exports.useSignOut = exports.signOut = exports.SignInCard = exports.SIGNIN_STYLE = exports.SIGNIN = exports.handoff = exports.address = exports.SignInPanel = exports.SignIn = void 0;
 /**
  * Signing in, signing out, and the session, for every Hanzo site: IAM answers
  * (/v1/iam), the site draws.
@@ -13,6 +13,9 @@ var handoff_1 = require("./handoff.cjs");
 Object.defineProperty(exports, "address", { enumerable: true, get: function () { return handoff_1.address; } });
 Object.defineProperty(exports, "handoff", { enumerable: true, get: function () { return handoff_1.handoff; } });
 Object.defineProperty(exports, "SIGNIN", { enumerable: true, get: function () { return handoff_1.SIGNIN; } });
+var look_1 = require("./look.cjs");
+Object.defineProperty(exports, "SIGNIN_STYLE", { enumerable: true, get: function () { return look_1.SIGNIN_STYLE; } });
+Object.defineProperty(exports, "SignInCard", { enumerable: true, get: function () { return look_1.SignInCard; } });
 var signout_1 = require("./signout.cjs");
 Object.defineProperty(exports, "signOut", { enumerable: true, get: function () { return signout_1.signOut; } });
 Object.defineProperty(exports, "useSignOut", { enumerable: true, get: function () { return signout_1.useSignOut; } });

package/dist/auth/index.d.ts

@@ -5,6 +5,7 @@
 export { SignIn, type Mode, type Provider, type SignInProps } from './SignIn.js';
 export { SignInPanel, type SignInPanelProps } from './SignInPanel.js';
 export { address, handoff, SIGNIN, type ProviderKind, type Way } from './handoff.js';
+export { SIGNIN_STYLE, SignInCard, type SignInCardProps } from './look.js';
 export { signOut, useSignOut, type SignOutOptions } from './signout.js';
 export { bearer, live, refresher } from './session.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/auth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,GAAG,EAAE,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,GAAG,EAAE,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}

package/dist/auth/index.js

@@ -5,6 +5,7 @@
 export { SignIn } from './SignIn.js';
 export { SignInPanel } from './SignInPanel.js';
 export { address, handoff, SIGNIN } from './handoff.js';
+export { SIGNIN_STYLE, SignInCard } from './look.js';
 export { signOut, useSignOut } from './signout.js';
 export { bearer, live, refresher } from './session.js';
 //# sourceMappingURL=index.js.map

package/dist/auth/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAA8C,MAAM,UAAU,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAA+B,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAuB,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAA8C,MAAM,UAAU,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAA+B,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAwB,MAAM,QAAQ,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAuB,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}

package/dist/auth/look.cjs

@@ -0,0 +1,67 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIGNIN_STYLE = void 0;
+exports.SignInCard = SignInCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../backends/gui/layout.cjs");
+const AT = '[data-signin]';
+const FILL = 'var(--popover,var(--panel))';
+const EDGE = 'var(--border,var(--edge))';
+const STRONG = 'var(--border-strong,var(--bound))';
+const INK = 'var(--foreground,var(--ink))';
+const MUTE = 'var(--muted-foreground,var(--quiet))';
+const FONT = 'var(--font-sans,Zen,system-ui,sans-serif)';
+const LIFT = 'transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background-color .2s,opacity .2s';
+/**
+ * Weight enough to outrank gui's atomic classes on this library's own controls,
+ * its per-theme ones included (`:root:root.t_light ._bxsh-…`, a filled Action's
+ * light shadow): an id's weight, matching every element (none is `#_`).
+ */
+const OVER = ':not(#_)';
+/**
+ * This library's Action, wherever it is set in the card. Its corners are stated
+ * `!important` too: a host may hold every Action round with an `!important` rule
+ * of its own (hanzo-inc/app app/layout.tsx `[data-slot="action"]`), and inside
+ * the card this scoped, weightier rule is the one that stands.
+ */
+const ACTION = `:is(button,a)[data-slot="action"]${OVER}`;
+/** This library's Input, alone; inside an InputGroup the group is the box. */
+const INPUT = `input[data-slot="input"]:not([data-slot="input-group"] *)${OVER}`;
+const GROUP = `[data-slot="input-group"]${OVER}`;
+/** Every rule the sign-in's controls are drawn by, scoped to the card. */
+exports.SIGNIN_STYLE = `${AT} [data-signin-body]{container-type:inline-size;display:flex;flex-direction:column;gap:10px;width:100%}` +
+    `${AT} [data-signin-pair]{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}` +
+    `${AT} [data-signin-pair]>:last-child:nth-child(odd){grid-column:1/-1}` +
+    `@container (max-width:379.98px){${AT} [data-signin-pair]{grid-template-columns:1fr}}` +
+    `${AT} [data-signin-btn]{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:46px;margin:0;padding:0 14px;border-radius:14px;border:1px solid ${EDGE};background:${FILL};color:${INK};font-family:${FONT};font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:${LIFT}}` +
+    `${AT} ${ACTION}{box-sizing:border-box;height:46px;min-height:46px;padding:0 14px;gap:9px;border-radius:14px!important;border:1px solid ${EDGE};background:${FILL};color:${INK};font-family:${FONT};font-size:14px;font-weight:500;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.04);backdrop-filter:none;-webkit-backdrop-filter:none;transition:${LIFT}}` +
+    `${AT} [data-signin-btn]:hover:not(:disabled),${AT} ${ACTION}:hover:not(:disabled){border-color:${STRONG};transform:translateY(-2px)}` +
+    `${AT} [data-signin-btn]:active:not(:disabled),${AT} ${ACTION}:active:not(:disabled){transform:scale(.98)}` +
+    `${AT} [data-signin-btn]:disabled,${AT} ${ACTION}:disabled{opacity:.55;cursor:not-allowed}` +
+    `${AT} [data-signin-btn][data-solid],${AT} ${ACTION}[data-fill]{background:${INK};color:var(--background);border-color:${INK}}` +
+    `${AT} [data-signin-btn][data-solid]:hover:not(:disabled),${AT} ${ACTION}[data-fill]:hover:not(:disabled){background:${INK};color:var(--background);border-color:${INK};opacity:.92;transform:none}` +
+    `${AT} [data-signin-btn] svg{flex-shrink:0}` +
+    `${AT} [data-signin-or]{display:flex;align-items:center;gap:12px;font-size:12.5px;color:${MUTE}}` +
+    `${AT} [data-signin-or]::before,${AT} [data-signin-or]::after{content:'';flex:1;height:1px;background:${EDGE}}` +
+    `${AT} [data-signin-form]{display:flex;flex-direction:column;gap:10px;margin:0}` +
+    `${AT} [data-signin-field]{box-sizing:border-box;width:100%;height:46px;margin:0;padding:0 16px;border-radius:14px;border:1px solid ${EDGE};background-color:${FILL};color:${INK};font-family:${FONT};font-size:14px;outline:none}` +
+    `${AT} ${INPUT}{height:46px;border-radius:14px;font-size:14px;background-color:${FILL}}` +
+    `${AT} ${INPUT}:not([aria-invalid="true"]){border-color:${EDGE}}` +
+    `${AT} ${GROUP}{border-radius:14px;background-color:${FILL}}` +
+    `${AT} ${GROUP}:not([data-focused]):not([data-invalid]){border-color:${EDGE}}` +
+    `${AT} [data-signin-field]::placeholder{color:${MUTE}}` +
+    `${AT} [data-signin-field]:focus-visible,${AT} ${INPUT}:not([aria-invalid="true"]):focus-visible{border-color:${STRONG};box-shadow:0 0 0 2px var(--ring,${STRONG})}` +
+    `${AT} ${GROUP}[data-focused]:not([data-invalid]){border-color:${STRONG}}` +
+    `${AT} [data-signin-wrong]{margin:0;font-size:13px;color:var(--destructive,#e5484d)}` +
+    `${AT} [data-signin-quiet]{margin:0;font-size:13px;color:${MUTE}}` +
+    `${AT} [data-signin-quiet] button{padding:0;border:0;background:none;color:${INK};font:inherit;cursor:pointer}` +
+    `${AT} [data-signin-quiet] button:hover:not(:disabled){text-decoration:underline}` +
+    `${AT} [data-signin-terms]{margin:0;max-width:400px;text-align:center;font-size:12px;line-height:18px;color:${MUTE}}` +
+    `${AT} [data-signin-terms] a{color:${INK};text-decoration:none}` +
+    `${AT} [data-signin-terms] a:hover{text-decoration:underline;text-underline-offset:2px}`;
+/** The card a sign-in is drawn in, carrying the rules its controls are drawn by. */
+function SignInCard({ background = '$background', borderColor = '$borderColor', bare = false, slot = 'signin-panel', children, ...rest }) {
+    const card = bare ? {} : { bg: background, borderWidth: 1, borderColor, rounded: '$6', p: '$6' };
+    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { "data-signin": "", "data-slot": slot, "data-surface": bare ? 'bare' : 'card', width: "100%", maxW: bare ? 400 : 464, items: "center", gap: "$3", ...card, ...rest, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: exports.SIGNIN_STYLE } }), children] }));
+}

package/dist/auth/look.d.ts

@@ -0,0 +1,59 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { YStack } from '../backends/gui/layout.js';
+/**
+ * The look every Hanzo sign-in shares: the card and the rules its controls are
+ * drawn by. The shared panel (./SignInPanel.tsx) is drawn on it, and so is
+ * hanzo.ai's own sign-in (hanzo-inc/app components/auth/steps.tsx `Sheet`, which
+ * keeps its own steps: the code, the password, the phone, the second factor).
+ * Both read these rules, so a front page and the page it hands off to cannot
+ * drift apart.
+ *
+ * The rules are hanzo.app's front-page sign-in (hanzo-inc/app steps.tsx
+ * `HERO_STYLE`): 46px controls with 14px corners, the providers side by side,
+ * one solid control. They are carried as one stylesheet scoped to the card
+ * (`data-signin`), set raw, so the host imports none. They read design's custom
+ * properties (`--popover`, `--border`, `--border-strong`, `--foreground`,
+ * `--muted-foreground`) with gui's theme keys behind them, so a host without
+ * design's sheet still draws it.
+ *
+ * What a host draws inside reads them by attribute:
+ *
+ *   [data-signin-body]   the column the controls stand in
+ *   [data-signin-pair]   the providers, side by side (stacked under 380px of room)
+ *   [data-signin-btn]    a control; with [data-solid], the one solid control
+ *   [data-signin-or]     the word between the providers and the address
+ *   [data-signin-form]   a form in the column
+ *   [data-signin-field]  a plain address field
+ *   [data-signin-wrong]  what went wrong; [data-signin-quiet] a quiet line
+ *   [data-signin-terms]  the terms line
+ *
+ * and this library's own controls set in the card take the same box without
+ * being marked: an Input or an InputGroup is the field (its padding stays its
+ * own, so a password's eye keeps its well), and an Action is the control, the
+ * filled one the solid control.
+ *
+ * The card is a solid ground inside a hairline, since a front page draws it over
+ * a busy backdrop. It is the site's to colour (`background`, `borderColor`: a
+ * theme token or any CSS colour), and `bare` drops it for a host that sets the
+ * sign-in in a card of its own, or on a quiet page. Inside the card the controls
+ * keep a 400px measure, so the card is 464px wide.
+ */
+export interface SignInCardProps extends Omit<ComponentProps<typeof YStack>, 'bg' | 'background' | 'borderColor'> {
+    /** The card's ground: a theme token (`$panel`) or any CSS colour. Default `$background`, solid. */
+    background?: Paint;
+    /** The card's hairline: a theme token or any CSS colour. Default `$borderColor`. */
+    borderColor?: Paint;
+    /** No card: the controls alone, 400px wide at most. */
+    bare?: boolean;
+    /** The `data-slot` a host finds the card by. Default `signin-panel`. */
+    slot?: string;
+    children?: ReactNode;
+}
+/** A colour the card takes, as the stack it is drawn on takes one. */
+type Paint = ComponentProps<typeof YStack>['bg'];
+/** Every rule the sign-in's controls are drawn by, scoped to the card. */
+export declare const SIGNIN_STYLE: string;
+/** The card a sign-in is drawn in, carrying the rules its controls are drawn by. */
+export declare function SignInCard({ background, borderColor, bare, slot, children, ...rest }: SignInCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=look.d.ts.map

package/dist/auth/look.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"look.d.ts","sourceRoot":"","sources":["../../src/auth/look.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,aAAa,CAAC;IAC/G,mGAAmG;IACnG,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,sEAAsE;AACtE,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,IAAI,CAAC,CAAA;AA4BhD,0EAA0E;AAC1E,eAAO,MAAM,YAAY,QA8BiE,CAAA;AAE1F,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,EAAE,UAA0B,EAAE,WAA4B,EAAE,IAAY,EAAE,IAAqB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAS/J"}

package/dist/auth/look.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { YStack } from '../backends/gui/layout.js';
+const AT = '[data-signin]';
+const FILL = 'var(--popover,var(--panel))';
+const EDGE = 'var(--border,var(--edge))';
+const STRONG = 'var(--border-strong,var(--bound))';
+const INK = 'var(--foreground,var(--ink))';
+const MUTE = 'var(--muted-foreground,var(--quiet))';
+const FONT = 'var(--font-sans,Zen,system-ui,sans-serif)';
+const LIFT = 'transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background-color .2s,opacity .2s';
+/**
+ * Weight enough to outrank gui's atomic classes on this library's own controls,
+ * its per-theme ones included (`:root:root.t_light ._bxsh-…`, a filled Action's
+ * light shadow): an id's weight, matching every element (none is `#_`).
+ */
+const OVER = ':not(#_)';
+/**
+ * This library's Action, wherever it is set in the card. Its corners are stated
+ * `!important` too: a host may hold every Action round with an `!important` rule
+ * of its own (hanzo-inc/app app/layout.tsx `[data-slot="action"]`), and inside
+ * the card this scoped, weightier rule is the one that stands.
+ */
+const ACTION = `:is(button,a)[data-slot="action"]${OVER}`;
+/** This library's Input, alone; inside an InputGroup the group is the box. */
+const INPUT = `input[data-slot="input"]:not([data-slot="input-group"] *)${OVER}`;
+const GROUP = `[data-slot="input-group"]${OVER}`;
+/** Every rule the sign-in's controls are drawn by, scoped to the card. */
+export const SIGNIN_STYLE = `${AT} [data-signin-body]{container-type:inline-size;display:flex;flex-direction:column;gap:10px;width:100%}` +
+    `${AT} [data-signin-pair]{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}` +
+    `${AT} [data-signin-pair]>:last-child:nth-child(odd){grid-column:1/-1}` +
+    `@container (max-width:379.98px){${AT} [data-signin-pair]{grid-template-columns:1fr}}` +
+    `${AT} [data-signin-btn]{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:46px;margin:0;padding:0 14px;border-radius:14px;border:1px solid ${EDGE};background:${FILL};color:${INK};font-family:${FONT};font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:${LIFT}}` +
+    `${AT} ${ACTION}{box-sizing:border-box;height:46px;min-height:46px;padding:0 14px;gap:9px;border-radius:14px!important;border:1px solid ${EDGE};background:${FILL};color:${INK};font-family:${FONT};font-size:14px;font-weight:500;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.04);backdrop-filter:none;-webkit-backdrop-filter:none;transition:${LIFT}}` +
+    `${AT} [data-signin-btn]:hover:not(:disabled),${AT} ${ACTION}:hover:not(:disabled){border-color:${STRONG};transform:translateY(-2px)}` +
+    `${AT} [data-signin-btn]:active:not(:disabled),${AT} ${ACTION}:active:not(:disabled){transform:scale(.98)}` +
+    `${AT} [data-signin-btn]:disabled,${AT} ${ACTION}:disabled{opacity:.55;cursor:not-allowed}` +
+    `${AT} [data-signin-btn][data-solid],${AT} ${ACTION}[data-fill]{background:${INK};color:var(--background);border-color:${INK}}` +
+    `${AT} [data-signin-btn][data-solid]:hover:not(:disabled),${AT} ${ACTION}[data-fill]:hover:not(:disabled){background:${INK};color:var(--background);border-color:${INK};opacity:.92;transform:none}` +
+    `${AT} [data-signin-btn] svg{flex-shrink:0}` +
+    `${AT} [data-signin-or]{display:flex;align-items:center;gap:12px;font-size:12.5px;color:${MUTE}}` +
+    `${AT} [data-signin-or]::before,${AT} [data-signin-or]::after{content:'';flex:1;height:1px;background:${EDGE}}` +
+    `${AT} [data-signin-form]{display:flex;flex-direction:column;gap:10px;margin:0}` +
+    `${AT} [data-signin-field]{box-sizing:border-box;width:100%;height:46px;margin:0;padding:0 16px;border-radius:14px;border:1px solid ${EDGE};background-color:${FILL};color:${INK};font-family:${FONT};font-size:14px;outline:none}` +
+    `${AT} ${INPUT}{height:46px;border-radius:14px;font-size:14px;background-color:${FILL}}` +
+    `${AT} ${INPUT}:not([aria-invalid="true"]){border-color:${EDGE}}` +
+    `${AT} ${GROUP}{border-radius:14px;background-color:${FILL}}` +
+    `${AT} ${GROUP}:not([data-focused]):not([data-invalid]){border-color:${EDGE}}` +
+    `${AT} [data-signin-field]::placeholder{color:${MUTE}}` +
+    `${AT} [data-signin-field]:focus-visible,${AT} ${INPUT}:not([aria-invalid="true"]):focus-visible{border-color:${STRONG};box-shadow:0 0 0 2px var(--ring,${STRONG})}` +
+    `${AT} ${GROUP}[data-focused]:not([data-invalid]){border-color:${STRONG}}` +
+    `${AT} [data-signin-wrong]{margin:0;font-size:13px;color:var(--destructive,#e5484d)}` +
+    `${AT} [data-signin-quiet]{margin:0;font-size:13px;color:${MUTE}}` +
+    `${AT} [data-signin-quiet] button{padding:0;border:0;background:none;color:${INK};font:inherit;cursor:pointer}` +
+    `${AT} [data-signin-quiet] button:hover:not(:disabled){text-decoration:underline}` +
+    `${AT} [data-signin-terms]{margin:0;max-width:400px;text-align:center;font-size:12px;line-height:18px;color:${MUTE}}` +
+    `${AT} [data-signin-terms] a{color:${INK};text-decoration:none}` +
+    `${AT} [data-signin-terms] a:hover{text-decoration:underline;text-underline-offset:2px}`;
+/** The card a sign-in is drawn in, carrying the rules its controls are drawn by. */
+export function SignInCard({ background = '$background', borderColor = '$borderColor', bare = false, slot = 'signin-panel', children, ...rest }) {
+    const card = bare ? {} : { bg: background, borderWidth: 1, borderColor, rounded: '$6', p: '$6' };
+    return (_jsxs(YStack, { "data-signin": "", "data-slot": slot, "data-surface": bare ? 'bare' : 'card', width: "100%", maxW: bare ? 400 : 464, items: "center", gap: "$3", ...card, ...rest, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: SIGNIN_STYLE } }), children] }));
+}
+//# sourceMappingURL=look.js.map

package/dist/auth/look.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"look.js","sourceRoot":"","sources":["../../src/auth/look.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAuD/C,MAAM,EAAE,GAAG,eAAe,CAAA;AAC1B,MAAM,IAAI,GAAG,6BAA6B,CAAA;AAC1C,MAAM,IAAI,GAAG,2BAA2B,CAAA;AACxC,MAAM,MAAM,GAAG,mCAAmC,CAAA;AAClD,MAAM,GAAG,GAAG,8BAA8B,CAAA;AAC1C,MAAM,IAAI,GAAG,sCAAsC,CAAA;AACnD,MAAM,IAAI,GAAG,2CAA2C,CAAA;AACxD,MAAM,IAAI,GAAG,0FAA0F,CAAA;AAEvG;;;;GAIG;AACH,MAAM,IAAI,GAAG,UAAU,CAAA;AACvB;;;;;GAKG;AACH,MAAM,MAAM,GAAG,oCAAoC,IAAI,EAAE,CAAA;AACzD,8EAA8E;AAC9E,MAAM,KAAK,GAAG,4DAA4D,IAAI,EAAE,CAAA;AAChF,MAAM,KAAK,GAAG,4BAA4B,IAAI,EAAE,CAAA;AAEhD,0EAA0E;AAC1E,MAAM,CAAC,MAAM,YAAY,GACvB,GAAG,EAAE,wGAAwG;IAC7G,GAAG,EAAE,qFAAqF;IAC1F,GAAG,EAAE,kEAAkE;IACvE,mCAAmC,EAAE,iDAAiD;IACtF,GAAG,EAAE,8LAA8L,IAAI,eAAe,IAAI,UAAU,GAAG,gBAAgB,IAAI,mIAAmI,IAAI,GAAG;IACrY,GAAG,EAAE,IAAI,MAAM,2HAA2H,IAAI,eAAe,IAAI,UAAU,GAAG,gBAAgB,IAAI,mJAAmJ,IAAI,GAAG;IAC5V,GAAG,EAAE,2CAA2C,EAAE,IAAI,MAAM,sCAAsC,MAAM,8BAA8B;IACtI,GAAG,EAAE,4CAA4C,EAAE,IAAI,MAAM,8CAA8C;IAC3G,GAAG,EAAE,+BAA+B,EAAE,IAAI,MAAM,2CAA2C;IAC3F,GAAG,EAAE,kCAAkC,EAAE,IAAI,MAAM,0BAA0B,GAAG,yCAAyC,GAAG,GAAG;IAC/H,GAAG,EAAE,uDAAuD,EAAE,IAAI,MAAM,+CAA+C,GAAG,yCAAyC,GAAG,8BAA8B;IACpM,GAAG,EAAE,uCAAuC;IAC5C,GAAG,EAAE,qFAAqF,IAAI,GAAG;IACjG,GAAG,EAAE,6BAA6B,EAAE,oEAAoE,IAAI,GAAG;IAC/G,GAAG,EAAE,2EAA2E;IAChF,GAAG,EAAE,iIAAiI,IAAI,qBAAqB,IAAI,UAAU,GAAG,gBAAgB,IAAI,+BAA+B;IACnO,GAAG,EAAE,IAAI,KAAK,mEAAmE,IAAI,GAAG;IACxF,GAAG,EAAE,IAAI,KAAK,4CAA4C,IAAI,GAAG;IACjE,GAAG,EAAE,IAAI,KAAK,wCAAwC,IAAI,GAAG;IAC7D,GAAG,EAAE,IAAI,KAAK,yDAAyD,IAAI,GAAG;IAC9E,GAAG,EAAE,2CAA2C,IAAI,GAAG;IACvD,GAAG,EAAE,sCAAsC,EAAE,IAAI,KAAK,0DAA0D,MAAM,oCAAoC,MAAM,IAAI;IACpK,GAAG,EAAE,IAAI,KAAK,mDAAmD,MAAM,GAAG;IAC1E,GAAG,EAAE,gFAAgF;IACrF,GAAG,EAAE,sDAAsD,IAAI,GAAG;IAClE,GAAG,EAAE,wEAAwE,GAAG,+BAA+B;IAC/G,GAAG,EAAE,6EAA6E;IAClF,GAAG,EAAE,yGAAyG,IAAI,GAAG;IACrH,GAAG,EAAE,gCAAgC,GAAG,wBAAwB;IAChE,GAAG,EAAE,mFAAmF,CAAA;AAE1F,oFAAoF;AACpF,MAAM,UAAU,UAAU,CAAC,EAAE,UAAU,GAAG,aAAa,EAAE,WAAW,GAAG,cAAc,EAAE,IAAI,GAAG,KAAK,EAAE,IAAI,GAAG,cAAc,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAmB;IAC9J,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAE,EAAE,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAY,CAAA;IAC3G,OAAO,CACL,MAAC,MAAM,mBAAa,EAAE,eAAY,IAAI,kBAAgB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,KAAK,IAAI,KAAM,IAAI,aAE3J,gBAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,GAAI,EAC3D,QAAQ,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/auth/panel.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIGNIN = exports.handoff = exports.address = exports.SignInPanel = void 0;
+exports.SignInCard = exports.SIGNIN_STYLE = exports.SIGNIN = exports.handoff = exports.address = exports.SignInPanel = void 0;
 /**
  * The shared sign-in panel and its hand-off, alone: what a Hanzo site draws on
- * its front page (./SignInPanel.tsx) and where each press goes (./handoff.ts).
+ * its front page (./SignInPanel.tsx), where each press goes (./handoff.ts), and
+ * the card and rules both it and hanzo.ai's own sign-in are drawn by (./look.tsx).
  *
  * Its own entry so importing the panel does not load the in-place sign-in form
  * (./SignIn.tsx), which needs a newer @hanzo/iam (`SecondFactor`) and
@@ -17,3 +18,6 @@ var handoff_1 = require("./handoff.cjs");
 Object.defineProperty(exports, "address", { enumerable: true, get: function () { return handoff_1.address; } });
 Object.defineProperty(exports, "handoff", { enumerable: true, get: function () { return handoff_1.handoff; } });
 Object.defineProperty(exports, "SIGNIN", { enumerable: true, get: function () { return handoff_1.SIGNIN; } });
+var look_1 = require("./look.cjs");
+Object.defineProperty(exports, "SIGNIN_STYLE", { enumerable: true, get: function () { return look_1.SIGNIN_STYLE; } });
+Object.defineProperty(exports, "SignInCard", { enumerable: true, get: function () { return look_1.SignInCard; } });

package/dist/auth/panel.d.ts

@@ -1,6 +1,7 @@
 /**
  * The shared sign-in panel and its hand-off, alone: what a Hanzo site draws on
- * its front page (./SignInPanel.tsx) and where each press goes (./handoff.ts).
+ * its front page (./SignInPanel.tsx), where each press goes (./handoff.ts), and
+ * the card and rules both it and hanzo.ai's own sign-in are drawn by (./look.tsx).
  *
  * Its own entry so importing the panel does not load the in-place sign-in form
  * (./SignIn.tsx), which needs a newer @hanzo/iam (`SecondFactor`) and
@@ -10,4 +11,5 @@
  */
 export { SignInPanel, type SignInPanelProps } from './SignInPanel.js';
 export { address, handoff, SIGNIN, type ProviderKind, type Way } from './handoff.js';
+export { SIGNIN_STYLE, SignInCard, type SignInCardProps } from './look.js';
 //# sourceMappingURL=panel.d.ts.map

package/dist/auth/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/auth/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,GAAG,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/auth/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,GAAG,EAAE,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAA"}

package/dist/auth/panel.js

@@ -1,6 +1,7 @@
 /**
  * The shared sign-in panel and its hand-off, alone: what a Hanzo site draws on
- * its front page (./SignInPanel.tsx) and where each press goes (./handoff.ts).
+ * its front page (./SignInPanel.tsx), where each press goes (./handoff.ts), and
+ * the card and rules both it and hanzo.ai's own sign-in are drawn by (./look.tsx).
  *
  * Its own entry so importing the panel does not load the in-place sign-in form
  * (./SignIn.tsx), which needs a newer @hanzo/iam (`SecondFactor`) and
@@ -10,4 +11,5 @@
  */
 export { SignInPanel } from './SignInPanel.js';
 export { address, handoff, SIGNIN } from './handoff.js';
+export { SIGNIN_STYLE, SignInCard } from './look.js';
 //# sourceMappingURL=panel.js.map

package/dist/auth/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/auth/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAA+B,MAAM,WAAW,CAAA"}
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/auth/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAA+B,MAAM,WAAW,CAAA;AACjF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAwB,MAAM,QAAQ,CAAA"}

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.32.3</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.33.0</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.32.3",
+  "version": "8.33.0",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {