@xenosystem/components 0.3.0 → 0.4.0

package/dist/auth/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { ButtonVariant } from '@xenosystem/elements-react';
 
 declare function ensureAuthStyles(): void;
@@ -122,12 +122,6 @@ declare function OrDivider({ children }: {
     children?: string;
 }): react.JSX.Element;
 
-/**
- * `EmailDisclosure` — the divider that is a BUTTON. On the origin page the email/password form starts
- * collapsed because it is the minority path (most people press a provider), so the "or continue with
- * email" rule opens it. A real button with `aria-expanded`/`aria-controls`, never a styled span, so it is
- * keyboard-reachable and announced as what it is.
- */
 interface EmailDisclosureProps {
     open: boolean;
     onToggle: () => void;
@@ -149,4 +143,24 @@ declare const CREDENTIAL_STATES: {
     props: CredentialStateProps;
 }[];
 
-export { AuthDoor, type AuthDoorProps, AuthHero, type AuthHeroProps, type AuthHeroStat, CREDENTIAL_STATES, type CredentialErrors, CredentialForm, type CredentialFormProps, type CredentialMode, type CredentialValues, EmailDisclosure, type EmailDisclosureProps, LicencePlate, OrDivider, STATES, type SignInAction, SignInForm, type SignInFormProps, type SocialProvider, SocialSignIn, type SocialSignInProps, XenoMark, ensureAuthStyles };
+/**
+ * `gallery()` — every unit of the family in every state, as renderable entries. This is what the
+ * workshop (rungs 1–2, from source) and xeno-apps' Library mode (from the published package) both
+ * consume, so neither hand-lists a state: `XENO FRONT-END HIERARCHY.md` — "states are derived, never
+ * hand-listed, IN the rung packages, so the workshop and the Library render the same list."
+ *
+ * `render` is pure: fixture props in, element out, callbacks inert. A gallery entry never reaches a
+ * network or a host.
+ */
+
+interface GalleryEntry {
+    family: 'auth';
+    unit: string;
+    state: string;
+    /** How the entry wants to be staged: `form` (a 400 px column) or `door` (fills a box, `inset: 0`). */
+    stage: 'form' | 'door';
+    render: () => ReactElement;
+}
+declare function gallery(): GalleryEntry[];
+
+export { AuthDoor, type AuthDoorProps, AuthHero, type AuthHeroProps, type AuthHeroStat, CREDENTIAL_STATES, type CredentialErrors, CredentialForm, type CredentialFormProps, type CredentialMode, type CredentialValues, EmailDisclosure, type EmailDisclosureProps, type GalleryEntry, LicencePlate, OrDivider, STATES, type SignInAction, SignInForm, type SignInFormProps, type SocialProvider, SocialSignIn, type SocialSignInProps, XenoMark, ensureAuthStyles, gallery };

package/dist/auth/index.js

@@ -1,4 +1,5 @@
 // src/auth/styles.ts
+import { useInsertionEffect } from "react";
 var STYLE_ID = "xeno-components-auth";
 var CSS = `
 .xc-auth{position:absolute;inset:0;display:flex;background:var(--xeno-canvas);color:var(--xeno-text);font-family:var(--xeno-font-sans);-webkit-font-smoothing:antialiased;overflow:hidden}
@@ -45,7 +46,7 @@ var CSS = `
 .xc-cred__mode{width:100%}
 .xc-cred__collapse{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--xeno-dur-entrance) var(--xeno-ease),opacity var(--xeno-dur-entrance) var(--xeno-ease)}
 .xc-cred__collapse[data-open=false]{grid-template-rows:0fr;opacity:0}
-.xc-cred__collapse > *{overflow:hidden;min-height:0}
+.xc-cred__collapseIn{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:24px}
 .xc-cred__fields{display:flex;flex-direction:column;gap:16px}
 .xc-cred__labelRow{display:flex;justify-content:space-between;align-items:baseline}
 .xc-cred__labelRow a{font-size:12px;color:var(--xeno-muted);text-decoration:none}
@@ -84,6 +85,11 @@ function ensureAuthStyles() {
   style.textContent = CSS;
   document.head.appendChild(style);
 }
+function useAuthStyles() {
+  useInsertionEffect(() => {
+    ensureAuthStyles();
+  }, []);
+}
 
 // src/auth/XenoMark.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -99,6 +105,7 @@ function XenoMark() {
 // src/auth/AuthHero.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function AuthHero({ headline, lead, stats, imageSrc, compact }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsxs2("div", { className: "xc-hero", "data-xc": "auth-hero", children: [
     imageSrc && /* @__PURE__ */ jsx2("img", { className: "xc-hero__img", src: imageSrc, alt: "", draggable: false }),
     /* @__PURE__ */ jsxs2("div", { className: "xc-hero__in", children: [
@@ -128,6 +135,7 @@ import { useEffect, useState } from "react";
 import { Button } from "@xenosystem/elements-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SignInForm({ tag, title, body, actions, note, warning, identity, animate = true, phase }) {
+  useAuthStyles();
   const [visible, setVisible] = useState(!animate);
   useEffect(() => {
     if (!animate) return;
@@ -191,6 +199,7 @@ var L = {
   signup: "Sign Up"
 };
 function CredentialForm({ mode, onModeChange, values, onChange, errors = {}, submitting = false, onSubmit, title, body, before, after, labels, passwordRules, passwordAside, open = true, id = "xc-credential-fields" }) {
+  useAuthStyles();
   const [showPassword, setShowPassword] = useState3(false);
   const [passwordFocused, setPasswordFocused] = useState3(false);
   const showRules = mode === "signup" && !!passwordRules?.length && (passwordFocused || values.password.length > 0);
@@ -217,35 +226,37 @@ function CredentialForm({ mode, onModeChange, values, onChange, errors = {}, sub
       }
     ),
     before,
-    /* @__PURE__ */ jsx5("div", { className: "xc-cred__collapse", "data-open": open, id, "aria-hidden": !open, children: /* @__PURE__ */ jsxs5("div", { className: "xc-cred__fields", children: [
-      /* @__PURE__ */ jsx5("div", { className: "xc-cred__reveal", "data-open": mode === "signup", "aria-hidden": mode !== "signup", children: /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
-        /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.name }),
-        /* @__PURE__ */ jsx5(TextInput, { size: "lg", value: values.name, onChange: set("name"), placeholder: "Your name", autoComplete: "name", tabIndex: mode === "signup" && open ? 0 : -1, "aria-invalid": !!errors.name, "data-field": "name" }),
-        errors.name && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.name })
-      ] }) }),
-      /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
-        /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.email }),
-        /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: "email", value: values.email, onChange: set("email"), placeholder: "you@example.com", autoComplete: "email", required: true, tabIndex: open ? 0 : -1, "aria-invalid": !!errors.email, "data-field": "email" }),
-        errors.email && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.email })
-      ] }),
-      /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
-        /* @__PURE__ */ jsxs5("span", { className: "xc-cred__labelRow", children: [
-          /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.password }),
-          passwordAside
+    /* @__PURE__ */ jsx5("div", { className: "xc-cred__collapse", "data-open": open, id, "aria-hidden": !open, children: /* @__PURE__ */ jsxs5("div", { className: "xc-cred__collapseIn", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "xc-cred__fields", children: [
+        /* @__PURE__ */ jsx5("div", { className: "xc-cred__reveal", "data-open": mode === "signup", "aria-hidden": mode !== "signup", children: /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
+          /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.name }),
+          /* @__PURE__ */ jsx5(TextInput, { size: "lg", value: values.name, onChange: set("name"), placeholder: "Your name", autoComplete: "name", tabIndex: mode === "signup" && open ? 0 : -1, "aria-invalid": !!errors.name, "data-field": "name" }),
+          errors.name && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.name })
+        ] }) }),
+        /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
+          /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.email }),
+          /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: "email", value: values.email, onChange: set("email"), placeholder: "you@example.com", autoComplete: "email", required: true, tabIndex: open ? 0 : -1, "aria-invalid": !!errors.email, "data-field": "email" }),
+          errors.email && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.email })
         ] }),
-        /* @__PURE__ */ jsxs5("span", { className: "xc-cred__pw", children: [
-          /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: showPassword ? "text" : "password", value: values.password, onChange: set("password"), onFocus: () => setPasswordFocused(true), onBlur: () => setPasswordFocused(false), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === "signup" ? "new-password" : "current-password", required: true, "aria-invalid": !!errors.password, "data-field": "password" }),
-          /* @__PURE__ */ jsx5(Button2, { type: "button", variant: "ghost", size: "sm", className: "xc-cred__eye", onClick: () => setShowPassword((v) => !v), "aria-label": showPassword ? "Hide password" : "Show password", "aria-pressed": showPassword, children: showPassword ? "Hide" : "Show" })
-        ] }),
-        errors.password && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.password }),
-        passwordRules && /* @__PURE__ */ jsx5("ul", { className: "xc-cred__rules", "data-open": showRules, "aria-live": "polite", children: passwordRules.map((r, i) => /* @__PURE__ */ jsxs5("li", { className: "xc-cred__rule", "data-met": r.met, style: { transitionDelay: `${i * 60}ms` }, children: [
-          /* @__PURE__ */ jsx5("svg", { className: "xc-cred__ruleMark", viewBox: "0 0 16 16", "aria-hidden": "true", children: r.met ? /* @__PURE__ */ jsx5("path", { d: "M3.5 8.5l3 3 6-6", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }) : /* @__PURE__ */ jsx5("rect", { x: "4", y: "7.25", width: "8", height: "1.5", fill: "currentColor" }) }),
-          /* @__PURE__ */ jsx5("span", { children: r.label })
-        ] }, r.label)) })
-      ] })
+        /* @__PURE__ */ jsxs5("label", { className: "xc-cred__field", children: [
+          /* @__PURE__ */ jsxs5("span", { className: "xc-cred__labelRow", children: [
+            /* @__PURE__ */ jsx5("span", { className: "xc-cred__label", children: t.password }),
+            passwordAside
+          ] }),
+          /* @__PURE__ */ jsxs5("span", { className: "xc-cred__pw", children: [
+            /* @__PURE__ */ jsx5(TextInput, { size: "lg", type: showPassword ? "text" : "password", value: values.password, onChange: set("password"), onFocus: () => setPasswordFocused(true), onBlur: () => setPasswordFocused(false), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", tabIndex: open ? 0 : -1, autoComplete: mode === "signup" ? "new-password" : "current-password", required: true, "aria-invalid": !!errors.password, "data-field": "password" }),
+            /* @__PURE__ */ jsx5(Button2, { type: "button", variant: "ghost", size: "sm", className: "xc-cred__eye", tabIndex: open ? 0 : -1, onClick: () => setShowPassword((v) => !v), "aria-label": showPassword ? "Hide password" : "Show password", "aria-pressed": showPassword, children: showPassword ? "Hide" : "Show" })
+          ] }),
+          errors.password && /* @__PURE__ */ jsx5("span", { className: "xc-cred__error", role: "alert", children: errors.password }),
+          passwordRules && /* @__PURE__ */ jsx5("ul", { className: "xc-cred__rules", "data-open": showRules, "aria-live": "polite", children: passwordRules.map((r, i) => /* @__PURE__ */ jsxs5("li", { className: "xc-cred__rule", "data-met": r.met, style: { transitionDelay: `${i * 60}ms` }, children: [
+            /* @__PURE__ */ jsx5("svg", { className: "xc-cred__ruleMark", viewBox: "0 0 16 16", "aria-hidden": "true", children: r.met ? /* @__PURE__ */ jsx5("path", { d: "M3.5 8.5l3 3 6-6", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }) : /* @__PURE__ */ jsx5("rect", { x: "4", y: "7.25", width: "8", height: "1.5", fill: "currentColor" }) }),
+            /* @__PURE__ */ jsx5("span", { children: r.label })
+          ] }, r.label)) })
+        ] })
+      ] }),
+      errors.form && /* @__PURE__ */ jsx5("p", { className: "xc-form__warn", role: "alert", children: errors.form }),
+      /* @__PURE__ */ jsx5("div", { className: "xc-form__actions", children: /* @__PURE__ */ jsx5(Button2, { type: "submit", variant: "primary", size: "lg", busy: submitting, tabIndex: open ? 0 : -1, "data-intent": "submit", children: mode === "signin" ? t.submitSignIn : t.submitSignUp }) })
     ] }) }),
-    errors.form && /* @__PURE__ */ jsx5("p", { className: "xc-form__warn", role: "alert", children: errors.form }),
-    /* @__PURE__ */ jsx5("div", { className: "xc-form__actions", children: /* @__PURE__ */ jsx5(Button2, { type: "submit", variant: "primary", size: "lg", busy: submitting, "data-intent": "submit", children: mode === "signin" ? t.submitSignIn : t.submitSignUp }) }),
     after && /* @__PURE__ */ jsx5("div", { className: "xc-cred__after", children: after })
   ] });
 }
@@ -265,18 +276,21 @@ function Mark({ p }) {
   return /* @__PURE__ */ jsx6("svg", { className: "xc-social__mark", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
 }
 function SocialSignIn({ providers = ["google", "github", "x"], onSelect, disabled }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsx6("div", { className: "xc-social", "data-xc": "social-sign-in", role: "group", "aria-label": "Continue with", children: providers.map((p) => /* @__PURE__ */ jsx6(Button3, { variant: "quiet", size: "lg", disabled, onClick: () => onSelect(p), "aria-label": `Continue with ${NAMES[p]}`, "data-provider": p, children: /* @__PURE__ */ jsx6(Mark, { p }) }, p)) });
 }
 
 // src/auth/OrDivider.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 function OrDivider({ children = "or continue with email" }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsx7("div", { className: "xc-or", role: "separator", "aria-label": children, children: /* @__PURE__ */ jsx7("span", { className: "xc-or__label", children }) });
 }
 
 // src/auth/EmailDisclosure.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function EmailDisclosure({ open, onToggle, controls, openLabel = "hide email sign-in", closedLabel = "or continue with email" }) {
+  useAuthStyles();
   return /* @__PURE__ */ jsx8("div", { className: "xc-or", "data-xc": "email-disclosure", children: /* @__PURE__ */ jsxs7("button", { type: "button", className: "xc-or__label xc-or__btn", onClick: onToggle, "aria-expanded": open, "aria-controls": controls, children: [
     open ? openLabel : closedLabel,
     /* @__PURE__ */ jsx8("svg", { className: "xc-or__caret", "data-open": open, viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) })
@@ -303,6 +317,46 @@ var CREDENTIAL_STATES = [
   { id: "collapsed", props: { mode: "signin", values: empty, open: false, title: "Welcome back", body: "Enter your credentials to access your account" } },
   { id: "rejected", props: { mode: "signin", values: { name: "", email: "you@example.com", password: "hunter22" }, errors: { form: "Invalid email or password." }, title: "Welcome back", body: "Enter your credentials to access your account" } }
 ];
+
+// src/auth/gallery.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var noop = () => {
+};
+function gallery() {
+  const out = [];
+  const hero = {
+    headline: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      "One account.",
+      /* @__PURE__ */ jsx9("br", {}),
+      "Every XENO product."
+    ] }),
+    lead: "Sign in once and XENO Canvas \u2014 and every other XENO app \u2014 runs under your plan, your credits and your files.",
+    stats: [{ value: "1", label: "Account" }, { value: "Yours", label: "Files stay put" }, { value: "Browser", label: "Sign-in, never in-app" }]
+  };
+  for (const s of STATES) {
+    out.push({ family: "auth", unit: "SignInForm", state: s.id, stage: "form", render: () => /* @__PURE__ */ jsx9(SignInForm, { ...s.props, phase: s.id }) });
+    out.push({ family: "auth", unit: "AuthDoor", state: s.id, stage: "door", render: () => /* @__PURE__ */ jsx9(AuthDoor, { label: `XENO Canvas sign-in \u2014 ${s.id}`, hero, rootAttributes: { "data-xeno-auth-gate": s.id }, children: /* @__PURE__ */ jsx9(SignInForm, { ...s.props, phase: s.id }) }) });
+  }
+  for (const s of CREDENTIAL_STATES) {
+    out.push({ family: "auth", unit: "CredentialForm", state: s.id, stage: "form", render: () => /* @__PURE__ */ jsx9(CredentialForm, { ...s.props, id: `gallery-${s.id}`, onModeChange: noop, onChange: noop, onSubmit: noop, before: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(SocialSignIn, { onSelect: noop }),
+      /* @__PURE__ */ jsx9(EmailDisclosure, { open: s.props.open !== false, onToggle: noop, controls: `gallery-${s.id}` })
+    ] }) }) });
+  }
+  out.push({ family: "auth", unit: "SocialSignIn", state: "default", stage: "form", render: () => /* @__PURE__ */ jsx9(SocialSignIn, { onSelect: noop }) });
+  out.push({ family: "auth", unit: "SocialSignIn", state: "disabled", stage: "form", render: () => /* @__PURE__ */ jsx9(SocialSignIn, { onSelect: noop, disabled: true }) });
+  const region = (id, open) => /* @__PURE__ */ jsx9("div", { id, hidden: !open, className: "xc-form__note", children: "the email form" });
+  out.push({ family: "auth", unit: "EmailDisclosure", state: "closed", stage: "form", render: () => /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(EmailDisclosure, { open: false, onToggle: noop, controls: "gallery-disclosure-closed" }),
+    region("gallery-disclosure-closed", false)
+  ] }) });
+  out.push({ family: "auth", unit: "EmailDisclosure", state: "open", stage: "form", render: () => /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(EmailDisclosure, { open: true, onToggle: noop, controls: "gallery-disclosure-open" }),
+    region("gallery-disclosure-open", true)
+  ] }) });
+  out.push({ family: "auth", unit: "OrDivider", state: "default", stage: "form", render: () => /* @__PURE__ */ jsx9(OrDivider, {}) });
+  return out;
+}
 export {
   AuthDoor,
   AuthHero,
@@ -315,5 +369,6 @@ export {
   SignInForm,
   SocialSignIn,
   XenoMark,
-  ensureAuthStyles
+  ensureAuthStyles,
+  gallery
 };

package/dist/index.d.ts

@@ -3,6 +3,6 @@
  * Families are subpaths: `@xenosystem/components/auth`, `/navigation`, `/feedback`, `/data`.
  * This root re-exports nothing on purpose: import the family you use, so a bundle carries only it.
  */
-declare const COMPONENTS_VERSION = "0.3.0";
+declare const COMPONENTS_VERSION = "0.4.0";
 
 export { COMPONENTS_VERSION };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-var COMPONENTS_VERSION = "0.3.0";
+var COMPONENTS_VERSION = "0.4.0";
 export {
   COMPONENTS_VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "XENO Components — rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",