@xenosystem/components 0.1.0

package/README.md

@@ -0,0 +1,13 @@
+# @xenosystem/components
+
+Rung 2 of the XENO front ladder (`XENO FRONT-END HIERARCHY.md`): molecules composed from
+`@xenosystem/elements-react`, props in, callbacks out, **no host contract** and **no visual value of
+its own** — every colour, radius and spacing is a `--xeno-*` token (`test/no-chrome.test.ts` fails
+on a hex literal).
+
+| family | import | components | extracted from |
+|---|---|---|---|
+| auth | `@xenosystem/components/auth` | `SignInForm`, `LicencePlate`, `AuthHero`, `AuthDoor` | `@xenosystem/panel-auth-gate` (Hub's login design) |
+
+Each family exports a `STATES` fixture list the harness renders, so every state is seen before a
+panel uses it. Import `@xenosystem/elements-react/xeno-elements.css` once in the host.

package/dist/auth/index.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ButtonVariant } from '@xenosystem/elements-react';
+
+declare function ensureAuthStyles(): void;
+declare function XenoMark(): ReactNode;
+interface AuthHeroStat {
+    value: string;
+    label: string;
+}
+interface AuthHeroProps {
+    headline: ReactNode;
+    lead?: ReactNode;
+    stats?: AuthHeroStat[];
+    imageSrc?: string;
+    /** `banner` is the short form (the square aspect): brand + headline only. */
+    compact?: boolean;
+}
+declare function AuthHero({ headline, lead, stats, imageSrc, compact }: AuthHeroProps): react.JSX.Element;
+interface SignInAction {
+    id: string;
+    label: string;
+    /** `primary` is the one white button; `quiet` a text-weight one. */
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface SignInFormProps {
+    /** A small uppercase tag above the heading — `No active plan`, `Update required`. */
+    tag?: string;
+    title: ReactNode;
+    body: ReactNode;
+    actions: SignInAction[];
+    /** Explanatory note under the actions (where the credential is entered, etc). */
+    note?: ReactNode;
+    /** A warning line — the host's own sentence about what went wrong. */
+    warning?: ReactNode;
+    /** Who is signed in, when known — display only. */
+    identity?: string;
+    /** The entrance fade; `false` renders settled (tests, screenshots). */
+    animate?: boolean;
+    /** Diagnostic hook the panel sets to its phase; carried to the DOM as `data-phase`. */
+    phase?: string;
+}
+declare function SignInForm({ tag, title, body, actions, note, warning, identity, animate, phase }: SignInFormProps): react.JSX.Element;
+/** The licence plates are the same form with a tag; kept as a name so a panel reads honestly. */
+declare const LicencePlate: typeof SignInForm;
+interface AuthDoorProps {
+    hero: Omit<AuthHeroProps, 'compact'>;
+    /** Aria label of the dialog. */
+    label: string;
+    children: ReactNode;
+    /** Diagnostic: carried to the root as `data-xeno-auth-gate` by the panel. */
+    rootAttributes?: Record<string, string | undefined>;
+}
+/**
+ * Hub's three aspect modes, measured on the door's OWN box — in a product the door is `inset: 0`
+ * and the two agree; in a harness it is a tile, and a component lays itself out for the box it
+ * was given.
+ */
+declare function AuthDoor({ hero, label, children, rootAttributes }: AuthDoorProps): react.JSX.Element;
+declare const STATES: {
+    id: string;
+    props: SignInFormProps;
+}[];
+
+export { AuthDoor, type AuthDoorProps, AuthHero, type AuthHeroProps, type AuthHeroStat, LicencePlate, STATES, type SignInAction, SignInForm, type SignInFormProps, XenoMark, ensureAuthStyles };

package/dist/auth/index.js

@@ -0,0 +1,146 @@
+// src/auth/index.tsx
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@xenosystem/elements-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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}
+.xc-auth *{box-sizing:border-box;margin:0}
+.xc-auth[data-aspect=landscape]{flex-direction:row}
+.xc-auth[data-aspect=square],.xc-auth[data-aspect=portrait]{flex-direction:column}
+.xc-auth__heroWrap{position:relative;overflow:hidden;flex:none}
+.xc-auth[data-aspect=landscape] .xc-auth__heroWrap{width:55%;height:100%}
+.xc-auth[data-aspect=square] .xc-auth__heroWrap{height:200px;width:100%}
+.xc-hero{position:absolute;inset:24px;border-radius:var(--xeno-radius-card);overflow:hidden;background:var(--xeno-surface)}
+.xc-auth[data-aspect=square] .xc-hero{inset:16px}
+.xc-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
+.xc-hero__in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:48px}
+.xc-auth[data-aspect=square] .xc-hero__in{padding:32px}
+.xc-brand{display:flex;align-items:center;gap:12px}
+.xc-brand svg{width:32px;height:32px}
+.xc-auth[data-aspect=square] .xc-brand svg,.xc-auth__head .xc-brand svg{width:20px;height:20px}
+.xc-brand__word{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
+.xc-auth[data-aspect=square] .xc-brand__word,.xc-auth__head .xc-brand__word{font-size:11px}
+.xc-hero__h1{font-size:3.5rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;max-width:32rem}
+.xc-auth[data-aspect=square] .xc-hero__h1{font-size:2rem}
+.xc-hero__lead{margin-top:16px;max-width:24rem;font-size:16px;line-height:1.6}
+.xc-hero__stats{display:flex;align-items:center;gap:32px}
+.xc-hero__stat b{display:block;font-size:24px;font-weight:700}
+.xc-hero__stat span{display:block;margin-top:2px;font-size:13px;font-weight:500}
+.xc-hero__sep{width:1px;height:32px;background:var(--xeno-border)}
+.xc-auth__head{display:flex;align-items:center;height:56px;padding:0 24px;flex:none}
+.xc-auth__side{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
+.xc-auth__center{flex:1;display:flex;align-items:center;justify-content:center;padding:0 32px}
+.xc-form{width:100%;max-width:340px;opacity:0;transform:translateY(16px);transition:opacity var(--xeno-dur-entrance,.7s) var(--xeno-ease),transform var(--xeno-dur-entrance,.7s) var(--xeno-ease)}
+.xc-form[data-visible=true]{opacity:1;transform:none}
+.xc-form__tag{display:inline-block;margin-bottom:14px;padding:3px 8px;border:1px solid var(--xeno-border);border-radius:var(--xeno-radius-xs);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--xeno-muted)}
+.xc-form__h2{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
+.xc-form__sub{margin-top:8px;font-size:15px;font-weight:500;line-height:1.6;color:var(--xeno-muted)}
+.xc-form__actions{margin-top:32px;display:flex;flex-direction:column;gap:12px}
+.xc-form__actions > *{width:100%}
+.xc-form__note{margin-top:16px;font-size:12px;line-height:1.6;color:var(--xeno-muted)}
+.xc-form__warn{margin-top:16px;font-size:12px;line-height:1.6;color:var(--xeno-danger)}
+.xc-form__who{margin-top:24px;padding-top:16px;border-top:1px solid var(--xeno-border-subtle);font-size:12px;color:var(--xeno-muted)}
+.xc-form__who b{color:var(--xeno-text);font-weight:500}
+`;
+function ensureAuthStyles() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+}
+function XenoMark() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 1082 1082", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M489.1 219.763L323.457 39.7072L101.649 30.4597C51.6926 28.3769 39.5494 67.5718 39.7224 87.4296L30.4124 310.735L347.816 655.757L475.833 537.987L241.73 283.514C207.644 246.462 222.019 240.156 233.467 241.634L455.275 250.881L489.1 219.763Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M861.765 489.52L1041.69 323.704L1050.94 101.684C1053.03 51.6793 1013.87 39.5273 994.024 39.7019L770.9 30.3995L426.135 348.133L543.8 476.263L798.083 241.917C835.108 207.796 841.408 222.184 839.931 233.644L830.674 455.664L861.765 489.52Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M592.871 862.143L758.514 1042.2L980.322 1051.45C1030.28 1053.53 1042.42 1014.33 1042.25 994.477L1051.56 771.171L734.155 426.15L606.138 543.919L840.241 798.392C874.327 835.444 859.952 841.751 848.504 840.272L626.696 831.025L592.871 862.143Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M220.763 592.907L40.7063 758.55L31.4588 980.358C29.3761 1030.31 68.5709 1042.46 88.4287 1042.28L311.735 1051.59L656.756 734.191L538.986 606.174L284.514 840.277C247.462 874.363 241.155 859.988 242.633 848.54L251.881 626.733L220.763 592.907Z", fill: "currentColor" })
+  ] });
+}
+function AuthHero({ headline, lead, stats, imageSrc, compact }) {
+  return /* @__PURE__ */ jsxs("div", { className: "xc-hero", "data-xc": "auth-hero", children: [
+    imageSrc && /* @__PURE__ */ jsx("img", { className: "xc-hero__img", src: imageSrc, alt: "", draggable: false }),
+    /* @__PURE__ */ jsxs("div", { className: "xc-hero__in", children: [
+      /* @__PURE__ */ jsxs("div", { className: "xc-brand", children: [
+        /* @__PURE__ */ jsx(XenoMark, {}),
+        /* @__PURE__ */ jsx("span", { className: "xc-brand__word", children: "XENO" })
+      ] }),
+      compact ? /* @__PURE__ */ jsx("h1", { className: "xc-hero__h1", children: headline }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "xc-hero__h1", children: headline }),
+          lead && /* @__PURE__ */ jsx("p", { className: "xc-hero__lead", children: lead })
+        ] }),
+        stats && stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "xc-hero__stats", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+          i > 0 && /* @__PURE__ */ jsx("div", { className: "xc-hero__sep" }),
+          /* @__PURE__ */ jsxs("div", { className: "xc-hero__stat", children: [
+            /* @__PURE__ */ jsx("b", { children: s.value }),
+            /* @__PURE__ */ jsx("span", { children: s.label })
+          ] })
+        ] }, s.label)) })
+      ] })
+    ] })
+  ] });
+}
+function SignInForm({ tag, title, body, actions, note, warning, identity, animate = true, phase }) {
+  const [visible, setVisible] = useState(!animate);
+  useEffect(() => {
+    if (!animate) return;
+    const t = window.setTimeout(() => setVisible(true), 100);
+    return () => window.clearTimeout(t);
+  }, [animate]);
+  return /* @__PURE__ */ jsxs("div", { className: "xc-form", "data-xc": "sign-in-form", "data-visible": visible, "data-phase": phase, children: [
+    tag && /* @__PURE__ */ jsx("span", { className: "xc-form__tag", children: tag }),
+    /* @__PURE__ */ jsx("h2", { className: "xc-form__h2", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "xc-form__sub", children: body }),
+    actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "xc-form__actions", children: actions.map((a) => /* @__PURE__ */ jsx(Button, { variant: a.variant ?? "secondary", size: "lg", disabled: a.disabled, onClick: a.onClick, "data-intent": a.id, children: a.label }, a.id)) }),
+    note && /* @__PURE__ */ jsx("p", { className: "xc-form__note", children: note }),
+    warning && /* @__PURE__ */ jsx("p", { className: "xc-form__warn", children: warning }),
+    identity && /* @__PURE__ */ jsxs("p", { className: "xc-form__who", children: [
+      "Signed in as ",
+      /* @__PURE__ */ jsx("b", { children: identity })
+    ] })
+  ] });
+}
+var LicencePlate = SignInForm;
+var aspectOf = (w, h) => h <= 0 ? "landscape" : w / h > 1.2 ? "landscape" : w / h < 0.85 ? "portrait" : "square";
+function AuthDoor({ hero, label, children, rootAttributes }) {
+  const ref = useRef(null);
+  const [aspect, setAspect] = useState("landscape");
+  useEffect(() => {
+    ensureAuthStyles();
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setAspect(aspectOf(width, height));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const brand = /* @__PURE__ */ jsxs("div", { className: "xc-brand", children: [
+    /* @__PURE__ */ jsx(XenoMark, {}),
+    /* @__PURE__ */ jsx("span", { className: "xc-brand__word", children: "XENO" })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { ref, className: "xc-auth", "data-xc": "auth-door", "data-aspect": aspect, role: "dialog", "aria-label": label, ...rootAttributes, children: [
+    aspect === "portrait" ? /* @__PURE__ */ jsx("header", { className: "xc-auth__head", children: brand }) : /* @__PURE__ */ jsx("div", { className: "xc-auth__heroWrap", children: /* @__PURE__ */ jsx(AuthHero, { ...hero, compact: aspect === "square" }) }),
+    /* @__PURE__ */ jsx("div", { className: "xc-auth__side", children: /* @__PURE__ */ jsx("div", { className: "xc-auth__center", children }) })
+  ] });
+}
+var STATES = [
+  { id: "sign-in", props: { title: "Welcome back", body: "Sign in to your XENO account to use XENO Canvas.", actions: [{ id: "signIn", label: "Sign in to XENO", variant: "primary" }], note: "Your browser opens at xenostudio.ai, where you can continue with Google, GitHub or email. XENO Canvas never sees your password.", animate: false } },
+  { id: "pending", props: { title: "Welcome back", body: "Sign in to your XENO account to use XENO Canvas.", actions: [{ id: "pending", label: "Finish in your browser\u2026", variant: "primary", disabled: true }, { id: "cancelSignIn", label: "Cancel", variant: "quiet" }], animate: false } },
+  { id: "unavailable", props: { tag: "Sign-in unavailable", title: "Can\u2019t reach your account", body: "The OS keystore is not available on this machine, so a sign-in could not be kept.", actions: [{ id: "refresh", label: "Try again", variant: "primary" }], animate: false } },
+  { id: "unlicensed", props: { tag: "No active plan", title: "XENO Canvas needs a plan", body: "Your account is on the Free plan. XENO Canvas is included from Creator.", actions: [{ id: "manageBilling", label: "Choose a plan", variant: "primary" }, { id: "refresh", label: "Check again", variant: "quiet" }, { id: "signOut", label: "Sign out", variant: "quiet" }], identity: "emilian@bnkrsys.com", animate: false } },
+  { id: "expired-offline", props: { tag: "Offline too long", title: "Your plan couldn\u2019t be confirmed", body: "XENO Canvas hasn\u2019t been able to reach XENO for 14 days \u2014 last confirmed 16 days ago. Your plan may be fine; connect once and it will pick up where it left off.", actions: [{ id: "refresh", label: "Check again", variant: "primary" }, { id: "signOut", label: "Sign out", variant: "quiet" }], identity: "emilian@bnkrsys.com", animate: false } },
+  { id: "update-required", props: { tag: "Update required", title: "Update XENO Canvas to continue", body: "Versions before 0.39.0 are no longer supported. The latest version is a short download away.", actions: [{ id: "openDownload", label: "Download the latest XENO Canvas", variant: "primary" }, { id: "signOut", label: "Sign out", variant: "quiet" }], identity: "emilian@bnkrsys.com", animate: false } }
+];
+export {
+  AuthDoor,
+  AuthHero,
+  LicencePlate,
+  STATES,
+  SignInForm,
+  XenoMark,
+  ensureAuthStyles
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `@xenosystem/components` — rung 2 of the FRONT ladder (`XENO FRONT-END HIERARCHY.md`).
+ * 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.1.0";
+
+export { COMPONENTS_VERSION };

package/dist/index.js

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

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@xenosystem/components",
+  "version": "0.1.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",
+  "sideEffects": false,
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    "./auth": { "types": "./dist/auth/index.d.ts", "import": "./dist/auth/index.js" }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@xenosystem/elements-react": ">=0.0.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@xenosystem/elements-react": "0.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^4.1.0"
+  },
+  "publishConfig": { "access": "public" }
+}