@volter/world-ui 0.1.0

package/dist/client/portal.tsx

@@ -0,0 +1,102 @@
+// A HOSTED ACCOUNT PORTAL — the hosted flow a billing vendor gives an application's customer to manage what
+// they pay for (docs/contributing/architecture.md, "Screens"): the merchant and the way back, then sections of
+// what the customer holds (a plan, a payment method, their details, past invoices), each item with the moves
+// the vendor offers on it. Rendered on the server; every move is a form that posts and comes back to the page,
+// with no script. A pack gives the words, the items and their moves; its skin gives the look. The same layout is a
+// vendor's settings page a person works in (an API keys page): its forms make new items from fields the person fills.
+import type { PaymentField } from './payment.tsx';
+/** A move on an item: a form that posts, or with `method: 'get'` a button that opens another page (a link a person follows). */
+export type PortalAction = { label: string; action: string; fields?: Record<string, string>; tone?: 'danger' | 'primary'; method?: 'get' | 'post' };
+export type PortalItem = { title: string; detail?: string; note?: string; badge?: string; actions?: PortalAction[] };
+export type PortalSection = { heading: string; items: PortalItem[]; empty?: string };
+/** A form that makes something new from fields the person fills, named the vendor's way. */
+export type PortalForm = { heading: string; action: string; fields: PaymentField[]; submit: { label: string } };
+
+export type PortalProps = {
+  merchant: string;
+  back?: { href: string; label: string };
+  /** a line at the top after a move ("Your plan will be canceled on May 1") */
+  notice?: string;
+  sections: PortalSection[];
+  forms?: PortalForm[];
+};
+
+export function Portal(props: PortalProps) {
+  return (
+    <div className="portal">
+      <aside className="portal-side">
+        <div className="portal-merchant">{props.merchant}</div>
+        {props.back ? <a className="portal-back" href={props.back.href}>{props.back.label}</a> : null}
+      </aside>
+      <main className="portal-main">
+        {props.notice ? <p className="portal-notice" role="status">{props.notice}</p> : null}
+        {props.sections.map((s) => (
+          <section key={s.heading} className="portal-section">
+            <h2>{s.heading}</h2>
+            {s.items.length === 0 && s.empty ? <p className="portal-empty">{s.empty}</p> : null}
+            <ul>
+              {s.items.map((item, i) => (
+                <li key={`${item.title}:${i}`} className="portal-item">
+                  <div className="portal-item-text">
+                    <strong>{item.title}</strong>
+                    {item.badge ? <span className="portal-badge">{item.badge}</span> : null}
+                    {item.detail ? <span className="portal-detail">{item.detail}</span> : null}
+                    {item.note ? <span className="portal-note">{item.note}</span> : null}
+                  </div>
+                  <div className="portal-actions">
+                    {(item.actions ?? []).map((a) => (
+                      <form key={a.label} method={a.method ?? 'post'} action={a.action}>
+                        {Object.entries(a.fields ?? {}).map(([k, v]) => <input key={k} type="hidden" name={k} value={v} />)}
+                        <button type="submit" className={`portal-button${a.tone ? ` portal-${a.tone}` : ''}`}>{a.label}</button>
+                      </form>
+                    ))}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+        {(props.forms ?? []).map((f) => (
+          <section key={f.heading} className="portal-section">
+            <h2>{f.heading}</h2>
+            <form method="post" action={f.action} className="portal-form">
+              {f.fields.map((field) => (
+                <label key={field.id} className="portal-field" htmlFor={field.id}>
+                  <span>{field.label}</span>
+                  {field.options
+                    ? <select id={field.id} name={field.id} defaultValue={field.value}>{field.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}</select>
+                    : <input id={field.id} name={field.id} type={field.type ?? 'text'} placeholder={field.placeholder} defaultValue={field.value} />}
+                </label>
+              ))}
+              <button type="submit" className="portal-button portal-primary">{f.submit.label}</button>
+            </form>
+          </section>
+        ))}
+      </main>
+    </div>
+  );
+}
+
+/** The portal's layout; a pack's skin sets the colours and type over it. */
+export const PORTAL_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.portal { display: grid; grid-template-columns: 1fr 2fr; min-height: 100vh; }
+@media (max-width: 800px) { .portal { grid-template-columns: 1fr; } }
+.portal-side { padding: 48px; }
+.portal-merchant { font-weight: 600; font-size: 18px; margin-bottom: 16px; }
+.portal-back { text-decoration: none; }
+.portal-main { padding: 48px; max-width: 640px; }
+.portal-notice { padding: 12px 16px; border-radius: 6px; margin: 0 0 24px; }
+.portal-section { margin-bottom: 32px; }
+.portal-section h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid; }
+.portal-section ul { list-style: none; padding: 0; margin: 0; }
+.portal-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
+.portal-item-text { display: flex; flex-direction: column; }
+.portal-badge { align-self: flex-start; font-size: 12px; padding: 0 6px; border-radius: 4px; margin: 2px 0; }
+.portal-detail, .portal-note { font-size: 13px; }
+.portal-actions { display: flex; gap: 8px; align-items: flex-start; }
+.portal-button { padding: 6px 12px; border-radius: 6px; border: 1px solid; font: inherit; cursor: pointer; background: transparent; }
+.portal-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+.portal-field { display: flex; flex-direction: column; gap: 4px; width: 100%; }
+.portal-field input, .portal-field select { padding: 8px 10px; border: 1px solid; border-radius: 6px; font: inherit; }
+`;

package/dist/client/sign-in.bundle.js

@@ -0,0 +1,28 @@
+var mB=Object.create;var{getPrototypeOf:uB,defineProperty:vB,getOwnPropertyNames:sB}=Object;var dB=Object.prototype.hasOwnProperty;function yB(W){return this[W]}var cB,iB,JB=(W,P,w)=>{var F=W!=null&&typeof W==="object";if(F){var C=P?cB??=new WeakMap:iB??=new WeakMap,I=C.get(W);if(I)return I}w=W!=null?mB(uB(W)):{};let A=P||!W||!W.__esModule?vB(w,"default",{value:W,enumerable:!0}):w;for(let x of sB(W))if(!dB.call(A,x))vB(A,x,{get:yB.bind(W,x),enumerable:!0});if(F)C.set(W,A);return A};var CB=(W,P)=>()=>(P||W((P={exports:{}}).exports,P),P.exports);var gB=CB((pB,XB)=>{(function(){function W(B,G){Object.defineProperty(F.prototype,B,{get:function(){console.warn("%s(...) is deprecated in plain JavaScript React classes. %s",G[0],G[1])}})}function P(B){if(B===null||typeof B!=="object")return null;return B=PB&&B[PB]||B["@@iterator"],typeof B==="function"?B:null}function w(B,G){B=(B=B.constructor)&&(B.displayName||B.name)||"ReactClass";var M=B+"."+G;wB[M]||(console.error("Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",G,B),wB[M]=!0)}function F(B,G,M){this.props=B,this.context=G,this.refs=OB,this.updater=M||DB}function C(){}function I(B,G,M){this.props=B,this.context=G,this.refs=OB,this.updater=M||DB}function A(){}function x(B){return""+B}function b(B){try{x(B);var G=!1}catch(U){G=!0}if(G){G=console;var M=G.error,R=typeof Symbol==="function"&&Symbol.toStringTag&&B[Symbol.toStringTag]||B.constructor.name||"Object";return M.call(G,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",R),x(B)}}function h(B){if(B==null)return null;if(typeof B==="function")return B.$$typeof===SB?null:B.displayName||B.name||null;if(typeof B==="string")return B;switch(B){case s:return"Fragment";case Y:return"Profiler";case H:return"StrictMode";case d:return"Suspense";case q:return"SuspenseList";case HB:return"Activity"}if(typeof B==="object")switch(typeof B.tag==="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),B.$$typeof){case GB:return"Portal";case D:return B.displayName||"Context";case O:return(B._context.displayName||"Context")+".Consumer";case T:var G=B.render;return B=B.displayName,B||(B=G.displayName||G.name||"",B=B!==""?"ForwardRef("+B+")":"ForwardRef"),B;case E:return G=B.displayName||null,G!==null?G:h(B.type)||"Memo";case N:G=B._payload,B=B._init;try{return h(B(G))}catch(M){}}return null}function e(B){if(B===s)return"<>";if(typeof B==="object"&&B!==null&&B.$$typeof===N)return"<...>";try{var G=h(B);return G?"<"+G+">":"<...>"}catch(M){return"<...>"}}function c(){var B=Z.A;return B===null?null:B.getOwner()}function i(){return Error("react-stack-top-frame")}function p(B){if(MB.call(B,"key")){var G=Object.getOwnPropertyDescriptor(B,"key").get;if(G&&G.isReactWarning)return!1}return B.key!==void 0}function YB(B,G){function M(){TB||(TB=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",G))}M.isReactWarning=!0,Object.defineProperty(B,"key",{get:M,configurable:!0})}function o(){var B=h(this.type);return IB[B]||(IB[B]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),B=this.props.ref,B!==void 0?B:null}function l(B,G,M,R,U,z){var X=M.ref;return B={$$typeof:a,type:B,key:G,props:M,_owner:R},(X!==void 0?X:null)!==null?Object.defineProperty(B,"ref",{enumerable:!1,get:o}):Object.defineProperty(B,"ref",{enumerable:!1,value:null}),B._store={},Object.defineProperty(B._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(B,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(B,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(B,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(B.props),Object.freeze(B)),B}function ZB(B,G){return G=l(B.type,G,B.props,B._owner,B._debugStack,B._debugTask),B._store&&(G._store.validated=B._store.validated),G}function BB(B){j(B)?B._store&&(B._store.validated=1):typeof B==="object"&&B!==null&&B.$$typeof===N&&(B._payload.status==="fulfilled"?j(B._payload.value)&&B._payload.value._store&&(B._payload.value._store.validated=1):B._store&&(B._store.validated=1))}function j(B){return typeof B==="object"&&B!==null&&B.$$typeof===a}function zB(B){var G={"=":"=0",":":"=2"};return"$"+B.replace(/[=:]/g,function(M){return G[M]})}function t(B,G){return typeof B==="object"&&B!==null&&B.key!=null?(b(B.key),zB(""+B.key)):G.toString(36)}function QB(B){switch(B.status){case"fulfilled":return B.value;case"rejected":throw B.reason;default:switch(typeof B.status==="string"?B.then(A,A):(B.status="pending",B.then(function(G){B.status==="pending"&&(B.status="fulfilled",B.value=G)},function(G){B.status==="pending"&&(B.status="rejected",B.reason=G)})),B.status){case"fulfilled":return B.value;case"rejected":throw B.reason}}throw B}function _(B,G,M,R,U){var z=typeof B;if(z==="undefined"||z==="boolean")B=null;var X=!1;if(B===null)X=!0;else switch(z){case"bigint":case"string":case"number":X=!0;break;case"object":switch(B.$$typeof){case a:case GB:X=!0;break;case N:return X=B._init,_(X(B._payload),G,M,R,U)}}if(X){X=B,U=U(X);var L=R===""?"."+t(X,0):R;return KB(U)?(M="",L!=null&&(M=L.replace(xB,"$&/")+"/"),_(U,G,M,"",function(v){return v})):U!=null&&(j(U)&&(U.key!=null&&(X&&X.key===U.key||b(U.key)),M=ZB(U,M+(U.key==null||X&&X.key===U.key?"":(""+U.key).replace(xB,"$&/")+"/")+L),R!==""&&X!=null&&j(X)&&X.key==null&&X._store&&!X._store.validated&&(M._store.validated=2),U=M),G.push(U)),1}if(X=0,L=R===""?".":R+":",KB(B))for(var Q=0;Q<B.length;Q++)R=B[Q],z=L+t(R,Q),X+=_(R,G,M,z,U);else if(Q=P(B),typeof Q==="function")for(Q===B.entries&&(NB||console.warn("Using Maps as children is not supported. Use an array of keyed ReactElements instead."),NB=!0),B=Q.call(B),Q=0;!(R=B.next()).done;)R=R.value,z=L+t(R,Q++),X+=_(R,G,M,z,U);else if(z==="object"){if(typeof B.then==="function")return _(QB(B),G,M,R,U);throw G=String(B),Error("Objects are not valid as a React child (found: "+(G==="[object Object]"?"object with keys {"+Object.keys(B).join(", ")+"}":G)+"). If you meant to render a collection of children, use an array instead.")}return X}function V(B,G,M){if(B==null)return B;var R=[],U=0;return _(B,R,"","",function(z){return G.call(M,z,U++)}),R}function LB(B){if(B._status===-1){var G=B._ioInfo;G!=null&&(G.start=G.end=performance.now()),G=B._result;var M=G();if(M.then(function(U){if(B._status===0||B._status===-1){B._status=1,B._result=U;var z=B._ioInfo;z!=null&&(z.end=performance.now()),M.status===void 0&&(M.status="fulfilled",M.value=U)}},function(U){if(B._status===0||B._status===-1){B._status=2,B._result=U;var z=B._ioInfo;z!=null&&(z.end=performance.now()),M.status===void 0&&(M.status="rejected",M.reason=U)}}),G=B._ioInfo,G!=null){G.value=M;var R=M.displayName;typeof R==="string"&&(G.name=R)}B._status===-1&&(B._status=0,B._result=M)}if(B._status===1)return G=B._result,G===void 0&&console.error(`lazy: Expected the result of a dynamic import() call. Instead received: %s
+
+Your code should look like: 
+  const MyComponent = lazy(() => import('./MyComponent'))
+
+Did you accidentally put curly braces around the import?`,G),"default"in G||console.error(`lazy: Expected the result of a dynamic import() call. Instead received: %s
+
+Your code should look like: 
+  const MyComponent = lazy(() => import('./MyComponent'))`,G),G.default;throw B._result}function $(){var B=Z.H;return B===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),B}function n(){Z.asyncTransitions--}function g(B){if(RB===null)try{var G=("require"+Math.random()).slice(0,7);RB=(XB&&XB[G]).call(XB,"timers").setImmediate}catch(M){RB=function(R){_B===!1&&(_B=!0,typeof MessageChannel>"u"&&console.error("This browser does not have a MessageChannel implementation, so enqueuing tasks via await act(async () => ...) will fail. Please file an issue at https://github.com/facebook/react/issues if you encounter this warning."));var U=new MessageChannel;U.port1.onmessage=R,U.port2.postMessage(void 0)}}return RB(B)}function S(B){return 1<B.length&&typeof AggregateError==="function"?AggregateError(B):B[0]}function k(B,G){G!==UB-1&&console.error("You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. "),UB=G}function m(B,G,M){var R=Z.actQueue;if(R!==null)if(R.length!==0)try{u(R),g(function(){return m(B,G,M)});return}catch(U){Z.thrownErrors.push(U)}else Z.actQueue=null;0<Z.thrownErrors.length?(R=S(Z.thrownErrors),Z.thrownErrors.length=0,M(R)):G(B)}function u(B){if(!$B){$B=!0;var G=0;try{for(;G<B.length;G++){var M=B[G];do{Z.didUsePromise=!1;var R=M(!1);if(R!==null){if(Z.didUsePromise){B[G]=M,B.splice(0,G);return}M=R}else break}while(1)}B.length=0}catch(U){B.splice(0,G+1),Z.thrownErrors.push(U)}finally{$B=!1}}}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart==="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var a=Symbol.for("react.transitional.element"),GB=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),Y=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),D=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),d=Symbol.for("react.suspense"),q=Symbol.for("react.suspense_list"),E=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),HB=Symbol.for("react.activity"),PB=Symbol.iterator,wB={},DB={isMounted:function(){return!1},enqueueForceUpdate:function(B){w(B,"forceUpdate")},enqueueReplaceState:function(B){w(B,"replaceState")},enqueueSetState:function(B){w(B,"setState")}},FB=Object.assign,OB={};Object.freeze(OB),F.prototype.isReactComponent={},F.prototype.setState=function(B,G){if(typeof B!=="object"&&typeof B!=="function"&&B!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,B,G,"setState")},F.prototype.forceUpdate=function(B){this.updater.enqueueForceUpdate(this,B,"forceUpdate")};var K={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]};for(r in K)K.hasOwnProperty(r)&&W(r,K[r]);C.prototype=F.prototype,K=I.prototype=new C,K.constructor=I,FB(K,F.prototype),K.isPureReactComponent=!0;var KB=Array.isArray,SB=Symbol.for("react.client.reference"),Z={H:null,A:null,T:null,S:null,actQueue:null,asyncTransitions:0,isBatchingLegacy:!1,didScheduleLegacyUpdate:!1,didUsePromise:!1,thrownErrors:[],getCurrentStack:null,recentlyCreatedOwnerStacks:0},MB=Object.prototype.hasOwnProperty,AB=console.createTask?console.createTask:function(){return null};K={react_stack_bottom_frame:function(B){return B()}};var TB,EB,IB={},kB=K.react_stack_bottom_frame.bind(K,i)(),fB=AB(e(i)),NB=!1,xB=/\/+/g,jB=typeof reportError==="function"?reportError:function(B){if(typeof window==="object"&&typeof window.ErrorEvent==="function"){var G=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof B==="object"&&B!==null&&typeof B.message==="string"?String(B.message):String(B),error:B});if(!window.dispatchEvent(G))return}else if(typeof process==="object"&&typeof process.emit==="function"){process.emit("uncaughtException",B);return}console.error(B)},_B=!1,RB=null,UB=0,WB=!1,$B=!1,VB=typeof queueMicrotask==="function"?function(B){queueMicrotask(function(){return queueMicrotask(B)})}:g;K=Object.freeze({__proto__:null,c:function(B){return $().useMemoCache(B)}});var r={map:V,forEach:function(B,G,M){V(B,function(){G.apply(this,arguments)},M)},count:function(B){var G=0;return V(B,function(){G++}),G},toArray:function(B){return V(B,function(G){return G})||[]},only:function(B){if(!j(B))throw Error("React.Children.only expected to receive a single React element child.");return B}};pB.Activity=HB,pB.Children=r,pB.Component=F,pB.Fragment=s,pB.Profiler=Y,pB.PureComponent=I,pB.StrictMode=H,pB.Suspense=d,pB.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=Z,pB.__COMPILER_RUNTIME=K,pB.act=function(B){var G=Z.actQueue,M=UB;UB++;var R=Z.actQueue=G!==null?G:[],U=!1;try{var z=B()}catch(Q){Z.thrownErrors.push(Q)}if(0<Z.thrownErrors.length)throw k(G,M),B=S(Z.thrownErrors),Z.thrownErrors.length=0,B;if(z!==null&&typeof z==="object"&&typeof z.then==="function"){var X=z;return VB(function(){U||WB||(WB=!0,console.error("You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);"))}),{then:function(Q,v){U=!0,X.then(function(y){if(k(G,M),M===0){try{u(R),g(function(){return m(y,Q,v)})}catch(hB){Z.thrownErrors.push(hB)}if(0<Z.thrownErrors.length){var bB=S(Z.thrownErrors);Z.thrownErrors.length=0,v(bB)}}else Q(y)},function(y){k(G,M),0<Z.thrownErrors.length?(y=S(Z.thrownErrors),Z.thrownErrors.length=0,v(y)):v(y)})}}}var L=z;if(k(G,M),M===0&&(u(R),R.length!==0&&VB(function(){U||WB||(WB=!0,console.error("A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:\n\nawait act(() => ...)"))}),Z.actQueue=null),0<Z.thrownErrors.length)throw B=S(Z.thrownErrors),Z.thrownErrors.length=0,B;return{then:function(Q,v){U=!0,M===0?(Z.actQueue=R,g(function(){return m(L,Q,v)})):Q(L)}}},pB.cache=function(B){return function(){return B.apply(null,arguments)}},pB.cacheSignal=function(){return null},pB.captureOwnerStack=function(){var B=Z.getCurrentStack;return B===null?null:B()},pB.cloneElement=function(B,G,M){if(B===null||B===void 0)throw Error("The argument must be a React element, but you passed "+B+".");var R=FB({},B.props),U=B.key,z=B._owner;if(G!=null){var X;B:{if(MB.call(G,"ref")&&(X=Object.getOwnPropertyDescriptor(G,"ref").get)&&X.isReactWarning){X=!1;break B}X=G.ref!==void 0}X&&(z=c()),p(G)&&(b(G.key),U=""+G.key);for(L in G)!MB.call(G,L)||L==="key"||L==="__self"||L==="__source"||L==="ref"&&G.ref===void 0||(R[L]=G[L])}var L=arguments.length-2;if(L===1)R.children=M;else if(1<L){X=Array(L);for(var Q=0;Q<L;Q++)X[Q]=arguments[Q+2];R.children=X}R=l(B.type,U,R,z,B._debugStack,B._debugTask);for(U=2;U<arguments.length;U++)BB(arguments[U]);return R},pB.createContext=function(B){return B={$$typeof:D,_currentValue:B,_currentValue2:B,_threadCount:0,Provider:null,Consumer:null},B.Provider=B,B.Consumer={$$typeof:O,_context:B},B._currentRenderer=null,B._currentRenderer2=null,B},pB.createElement=function(B,G,M){for(var R=2;R<arguments.length;R++)BB(arguments[R]);R={};var U=null;if(G!=null)for(Q in EB||!("__self"in G)||"key"in G||(EB=!0,console.warn("Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform")),p(G)&&(b(G.key),U=""+G.key),G)MB.call(G,Q)&&Q!=="key"&&Q!=="__self"&&Q!=="__source"&&(R[Q]=G[Q]);var z=arguments.length-2;if(z===1)R.children=M;else if(1<z){for(var X=Array(z),L=0;L<z;L++)X[L]=arguments[L+2];Object.freeze&&Object.freeze(X),R.children=X}if(B&&B.defaultProps)for(Q in z=B.defaultProps,z)R[Q]===void 0&&(R[Q]=z[Q]);U&&YB(R,typeof B==="function"?B.displayName||B.name||"Unknown":B);var Q=1e4>Z.recentlyCreatedOwnerStacks++;return l(B,U,R,c(),Q?Error("react-stack-top-frame"):kB,Q?AB(e(B)):fB)},pB.createRef=function(){var B={current:null};return Object.seal(B),B},pB.forwardRef=function(B){B!=null&&B.$$typeof===E?console.error("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...))."):typeof B!=="function"?console.error("forwardRef requires a render function but was given %s.",B===null?"null":typeof B):B.length!==0&&B.length!==2&&console.error("forwardRef render functions accept exactly two parameters: props and ref. %s",B.length===1?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),B!=null&&B.defaultProps!=null&&console.error("forwardRef render functions do not support defaultProps. Did you accidentally pass a React component?");var G={$$typeof:T,render:B},M;return Object.defineProperty(G,"displayName",{enumerable:!1,configurable:!0,get:function(){return M},set:function(R){M=R,B.name||B.displayName||(Object.defineProperty(B,"name",{value:R}),B.displayName=R)}}),G},pB.isValidElement=j,pB.lazy=function(B){B={_status:-1,_result:B};var G={$$typeof:N,_payload:B,_init:LB},M={name:"lazy",start:-1,end:-1,value:null,owner:null,debugStack:Error("react-stack-top-frame"),debugTask:console.createTask?console.createTask("lazy()"):null};return B._ioInfo=M,G._debugInfo=[{awaited:M}],G},pB.memo=function(B,G){B==null&&console.error("memo: The first argument must be a component. Instead received: %s",B===null?"null":typeof B),G={$$typeof:E,type:B,compare:G===void 0?null:G};var M;return Object.defineProperty(G,"displayName",{enumerable:!1,configurable:!0,get:function(){return M},set:function(R){M=R,B.name||B.displayName||(Object.defineProperty(B,"name",{value:R}),B.displayName=R)}}),G},pB.startTransition=function(B){var G=Z.T,M={};M._updatedFibers=new Set,Z.T=M;try{var R=B(),U=Z.S;U!==null&&U(M,R),typeof R==="object"&&R!==null&&typeof R.then==="function"&&(Z.asyncTransitions++,R.then(n,n),R.then(A,jB))}catch(z){jB(z)}finally{G===null&&M._updatedFibers&&(B=M._updatedFibers.size,M._updatedFibers.clear(),10<B&&console.warn("Detected a large number of updates inside startTransition. If this is due to a subscription please re-write it to use React provided hooks. Otherwise concurrent mode guarantees are off the table.")),G!==null&&M.types!==null&&(G.types!==null&&G.types!==M.types&&console.error("We expected inner Transitions to have transferred the outer types set and that you cannot add to the outer Transition while inside the inner.This is a bug in React."),G.types=M.types),Z.T=G}},pB.unstable_useCacheRefresh=function(){return $().useCacheRefresh()},pB.use=function(B){return $().use(B)},pB.useActionState=function(B,G,M){return $().useActionState(B,G,M)},pB.useCallback=function(B,G){return $().useCallback(B,G)},pB.useContext=function(B){var G=$();return B.$$typeof===O&&console.error("Calling useContext(Context.Consumer) is not supported and will cause bugs. Did you mean to call useContext(Context) instead?"),G.useContext(B)},pB.useDebugValue=function(B,G){return $().useDebugValue(B,G)},pB.useDeferredValue=function(B,G){return $().useDeferredValue(B,G)},pB.useEffect=function(B,G){return B==null&&console.warn("React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?"),$().useEffect(B,G)},pB.useEffectEvent=function(B){return $().useEffectEvent(B)},pB.useId=function(){return $().useId()},pB.useImperativeHandle=function(B,G,M){return $().useImperativeHandle(B,G,M)},pB.useInsertionEffect=function(B,G){return B==null&&console.warn("React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?"),$().useInsertionEffect(B,G)},pB.useLayoutEffect=function(B,G){return B==null&&console.warn("React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?"),$().useLayoutEffect(B,G)},pB.useMemo=function(B,G){return $().useMemo(B,G)},pB.useOptimistic=function(B,G){return $().useOptimistic(B,G)},pB.useReducer=function(B,G,M){return $().useReducer(B,G,M)},pB.useRef=function(B){return $().useRef(B)},pB.useState=function(B){return $().useState(B)},pB.useSyncExternalStore=function(B,G,M){return $().useSyncExternalStore(B,G,M)},pB.useTransition=function(){return $().useTransition()},pB.version="19.2.7",typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop==="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())})()});var qB=CB((oB)=>{var f=JB(gB());(function(){function W(H){if(H==null)return null;if(typeof H==="function")return H.$$typeof===$?null:H.displayName||H.name||null;if(typeof H==="string")return H;switch(H){case o:return"Fragment";case ZB:return"Profiler";case l:return"StrictMode";case t:return"Suspense";case QB:return"SuspenseList";case LB:return"Activity"}if(typeof H==="object")switch(typeof H.tag==="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),H.$$typeof){case YB:return"Portal";case j:return H.displayName||"Context";case BB:return(H._context.displayName||"Context")+".Consumer";case zB:var Y=H.render;return H=H.displayName,H||(H=Y.displayName||Y.name||"",H=H!==""?"ForwardRef("+H+")":"ForwardRef"),H;case _:return Y=H.displayName||null,Y!==null?Y:W(H.type)||"Memo";case V:Y=H._payload,H=H._init;try{return W(H(Y))}catch(O){}}return null}function P(H){return""+H}function w(H){try{P(H);var Y=!1}catch(T){Y=!0}if(Y){Y=console;var O=Y.error,D=typeof Symbol==="function"&&Symbol.toStringTag&&H[Symbol.toStringTag]||H.constructor.name||"Object";return O.call(Y,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",D),P(H)}}function F(H){if(H===o)return"<>";if(typeof H==="object"&&H!==null&&H.$$typeof===V)return"<...>";try{var Y=W(H);return Y?"<"+Y+">":"<...>"}catch(O){return"<...>"}}function C(){var H=n.A;return H===null?null:H.getOwner()}function I(){return Error("react-stack-top-frame")}function A(H){if(g.call(H,"key")){var Y=Object.getOwnPropertyDescriptor(H,"key").get;if(Y&&Y.isReactWarning)return!1}return H.key!==void 0}function x(H,Y){function O(){m||(m=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",Y))}O.isReactWarning=!0,Object.defineProperty(H,"key",{get:O,configurable:!0})}function b(){var H=W(this.type);return u[H]||(u[H]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),H=this.props.ref,H!==void 0?H:null}function h(H,Y,O,D,T,d){var q=O.ref;return H={$$typeof:p,type:H,key:Y,props:O,_owner:D},(q!==void 0?q:null)!==null?Object.defineProperty(H,"ref",{enumerable:!1,get:b}):Object.defineProperty(H,"ref",{enumerable:!1,value:null}),H._store={},Object.defineProperty(H._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(H,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(H,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(H,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:d}),Object.freeze&&(Object.freeze(H.props),Object.freeze(H)),H}function e(H,Y,O,D,T,d){var q=Y.children;if(q!==void 0)if(D)if(S(q)){for(D=0;D<q.length;D++)c(q[D]);Object.freeze&&Object.freeze(q)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(q);if(g.call(Y,"key")){q=W(H);var E=Object.keys(Y).filter(function(HB){return HB!=="key"});D=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",s[q+D]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,D,q,E,q),s[q+D]=!0)}if(q=null,O!==void 0&&(w(O),q=""+O),A(Y)&&(w(Y.key),q=""+Y.key),"key"in Y){O={};for(var N in Y)N!=="key"&&(O[N]=Y[N])}else O=Y;return q&&x(O,typeof H==="function"?H.displayName||H.name||"Unknown":H),h(H,q,O,C(),T,d)}function c(H){i(H)?H._store&&(H._store.validated=1):typeof H==="object"&&H!==null&&H.$$typeof===V&&(H._payload.status==="fulfilled"?i(H._payload.value)&&H._payload.value._store&&(H._payload.value._store.validated=1):H._store&&(H._store.validated=1))}function i(H){return typeof H==="object"&&H!==null&&H.$$typeof===p}var p=Symbol.for("react.transitional.element"),YB=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),l=Symbol.for("react.strict_mode"),ZB=Symbol.for("react.profiler"),BB=Symbol.for("react.consumer"),j=Symbol.for("react.context"),zB=Symbol.for("react.forward_ref"),t=Symbol.for("react.suspense"),QB=Symbol.for("react.suspense_list"),_=Symbol.for("react.memo"),V=Symbol.for("react.lazy"),LB=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),n=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,g=Object.prototype.hasOwnProperty,S=Array.isArray,k=console.createTask?console.createTask:function(){return null};f={react_stack_bottom_frame:function(H){return H()}};var m,u={},a=f.react_stack_bottom_frame.bind(f,I)(),GB=k(F(I)),s={};oB.Fragment=o,oB.jsxDEV=function(H,Y,O,D){var T=1e4>n.recentlyCreatedOwnerStacks++;return e(H,Y,O,D,T?Error("react-stack-top-frame"):a,T?k(F(H)):GB)}})()});var J=JB(qB(),1);function yG(W){return J.jsxDEV("main",{className:"sign-in",children:[J.jsxDEV("div",{className:"sign-in-mark","aria-hidden":"true"},void 0,!1,void 0,this),J.jsxDEV("h1",{className:"sign-in-heading",children:W.heading},void 0,!1,void 0,this),W.error?J.jsxDEV("div",{className:"sign-in-error",role:"alert",children:W.error},void 0,!1,void 0,this):null,J.jsxDEV("form",{method:"post",action:W.action,className:"sign-in-box",children:[Object.entries(W.fields).map(([P,w])=>J.jsxDEV("input",{type:"hidden",name:P,value:w},P,!1,void 0,this)),J.jsxDEV("label",{htmlFor:W.account.name,children:W.account.label},void 0,!1,void 0,this),J.jsxDEV("input",{id:W.account.name,name:W.account.name,type:"text",autoComplete:"username",defaultValue:W.account.value??""},void 0,!1,void 0,this),J.jsxDEV("label",{htmlFor:W.password.name,children:W.password.label},void 0,!1,void 0,this),J.jsxDEV("input",{id:W.password.name,name:W.password.name,type:"password",autoComplete:"current-password"},void 0,!1,void 0,this),J.jsxDEV("button",{type:"submit",className:"sign-in-submit",children:W.submit},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)}function cG(W){return J.jsxDEV("main",{className:"sign-in",children:[J.jsxDEV("div",{className:"sign-in-mark","aria-hidden":"true"},void 0,!1,void 0,this),J.jsxDEV("h1",{className:"sign-in-heading",children:W.heading},void 0,!1,void 0,this),W.error?J.jsxDEV("div",{className:"sign-in-error",role:"alert",children:W.error},void 0,!1,void 0,this):null,J.jsxDEV("form",{method:"post",action:W.action,className:"sign-in-box",children:[Object.entries(W.fields).map(([P,w])=>J.jsxDEV("input",{type:"hidden",name:P,value:w},P,!1,void 0,this)),J.jsxDEV("label",{htmlFor:W.code.name,children:W.code.label},void 0,!1,void 0,this),J.jsxDEV("input",{id:W.code.name,name:W.code.name,type:"text",inputMode:"numeric",autoComplete:"one-time-code"},void 0,!1,void 0,this),J.jsxDEV("p",{className:"sign-in-hint",children:W.hint},void 0,!1,void 0,this),J.jsxDEV("button",{type:"submit",className:"sign-in-submit",children:W.submit},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)}var iG=`
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.sign-in { max-width: 340px; margin: 0 auto; padding: 32px 16px; }
+.sign-in-mark { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; }
+.sign-in-heading { text-align: center; font-weight: 300; font-size: 24px; margin: 0 0 16px; }
+.sign-in-error { border: 1px solid; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
+.sign-in-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid; border-radius: 6px; padding: 16px; }
+.sign-in-box input[type=text], .sign-in-box input[type=password] { font: inherit; padding: 5px 12px; border: 1px solid; border-radius: 6px; margin-bottom: 8px; }
+.sign-in-hint { margin: 0 0 8px; font-size: 12px; }
+.sign-in-submit { font: inherit; font-weight: 500; padding: 6px 16px; border-radius: 6px; border: 1px solid; cursor: pointer; }
+`;function pG(W,P){for(let w of(W.headers.get("cookie")??"").split(";")){let F=w.indexOf("=");if(F>0&&w.slice(0,F).trim()===P)return decodeURIComponent(w.slice(F+1).trim())}return}export{pG as cookieOf,cG as SignInCode,yG as SignIn,iG as SIGN_IN_CSS};

package/dist/client/sign-in.d.ts

@@ -0,0 +1,43 @@
+export type SignInProps = {
+    /** the page's heading, the vendor's words ("Sign in to GitHub") */
+    heading: string;
+    /** where the form posts, and the hidden fields the vendor's form carries (where to return to) */
+    action: string;
+    fields: Record<string, string>;
+    /** the account field and the password field: their names, labels and (the account's) prefilled value */
+    account: {
+        name: string;
+        label: string;
+        value?: string;
+    };
+    password: {
+        name: string;
+        label: string;
+    };
+    submit: string;
+    /** the vendor's message for a refused attempt ("Incorrect username or password.") */
+    error?: string;
+};
+export declare function SignIn(props: SignInProps): import("react").JSX.Element;
+/** A sign-in's second step, for a person who has two-factor authentication: after the right password the vendor asks
+ *  for the code their authenticator shows, on a page of its own. It lays out as the sign-in does (SIGN_IN_CSS). */
+export type SignInCodeProps = {
+    /** the page's heading and the line under it, the vendor's words */
+    heading: string;
+    hint: string;
+    action: string;
+    fields: Record<string, string>;
+    /** the code field: its name and label */
+    code: {
+        name: string;
+        label: string;
+    };
+    submit: string;
+    /** the vendor's message for a refused code */
+    error?: string;
+};
+export declare function SignInCode(props: SignInCodeProps): import("react").JSX.Element;
+/** The sign-in page's layout; a pack's skin sets the colours and type over it. */
+export declare const SIGN_IN_CSS = "\nbody { margin: 0; font: 14px/1.5 system-ui, -apple-system, \"Segoe UI\", sans-serif; }\n.sign-in { max-width: 340px; margin: 0 auto; padding: 32px 16px; }\n.sign-in-mark { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; }\n.sign-in-heading { text-align: center; font-weight: 300; font-size: 24px; margin: 0 0 16px; }\n.sign-in-error { border: 1px solid; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }\n.sign-in-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid; border-radius: 6px; padding: 16px; }\n.sign-in-box input[type=text], .sign-in-box input[type=password] { font: inherit; padding: 5px 12px; border: 1px solid; border-radius: 6px; margin-bottom: 8px; }\n.sign-in-hint { margin: 0 0 8px; font-size: 12px; }\n.sign-in-submit { font: inherit; font-weight: 500; padding: 6px 16px; border-radius: 6px; border: 1px solid; cursor: pointer; }\n";
+/** The value of the cookie `name` the request carries, as a browser sends it back. */
+export declare function cookieOf(request: Request, name: string): string | undefined;

package/dist/client/sign-in.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SignIn(props) {
+    return (_jsxs("main", { className: "sign-in", children: [_jsx("div", { className: "sign-in-mark", "aria-hidden": "true" }), _jsx("h1", { className: "sign-in-heading", children: props.heading }), props.error ? _jsx("div", { className: "sign-in-error", role: "alert", children: props.error }) : null, _jsxs("form", { method: "post", action: props.action, className: "sign-in-box", children: [Object.entries(props.fields).map(([name, value]) => _jsx("input", { type: "hidden", name: name, value: value }, name)), _jsx("label", { htmlFor: props.account.name, children: props.account.label }), _jsx("input", { id: props.account.name, name: props.account.name, type: "text", autoComplete: "username", defaultValue: props.account.value ?? '' }), _jsx("label", { htmlFor: props.password.name, children: props.password.label }), _jsx("input", { id: props.password.name, name: props.password.name, type: "password", autoComplete: "current-password" }), _jsx("button", { type: "submit", className: "sign-in-submit", children: props.submit })] })] }));
+}
+export function SignInCode(props) {
+    return (_jsxs("main", { className: "sign-in", children: [_jsx("div", { className: "sign-in-mark", "aria-hidden": "true" }), _jsx("h1", { className: "sign-in-heading", children: props.heading }), props.error ? _jsx("div", { className: "sign-in-error", role: "alert", children: props.error }) : null, _jsxs("form", { method: "post", action: props.action, className: "sign-in-box", children: [Object.entries(props.fields).map(([name, value]) => _jsx("input", { type: "hidden", name: name, value: value }, name)), _jsx("label", { htmlFor: props.code.name, children: props.code.label }), _jsx("input", { id: props.code.name, name: props.code.name, type: "text", inputMode: "numeric", autoComplete: "one-time-code" }), _jsx("p", { className: "sign-in-hint", children: props.hint }), _jsx("button", { type: "submit", className: "sign-in-submit", children: props.submit })] })] }));
+}
+/** The sign-in page's layout; a pack's skin sets the colours and type over it. */
+export const SIGN_IN_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.sign-in { max-width: 340px; margin: 0 auto; padding: 32px 16px; }
+.sign-in-mark { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; }
+.sign-in-heading { text-align: center; font-weight: 300; font-size: 24px; margin: 0 0 16px; }
+.sign-in-error { border: 1px solid; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
+.sign-in-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid; border-radius: 6px; padding: 16px; }
+.sign-in-box input[type=text], .sign-in-box input[type=password] { font: inherit; padding: 5px 12px; border: 1px solid; border-radius: 6px; margin-bottom: 8px; }
+.sign-in-hint { margin: 0 0 8px; font-size: 12px; }
+.sign-in-submit { font: inherit; font-weight: 500; padding: 6px 16px; border-radius: 6px; border: 1px solid; cursor: pointer; }
+`;
+/** The value of the cookie `name` the request carries, as a browser sends it back. */
+export function cookieOf(request, name) {
+    for (const part of (request.headers.get('cookie') ?? '').split(';')) {
+        const at = part.indexOf('=');
+        if (at > 0 && part.slice(0, at).trim() === name)
+            return decodeURIComponent(part.slice(at + 1).trim());
+    }
+    return undefined;
+}

package/dist/client/sign-in.tsx

@@ -0,0 +1,90 @@
+// A SIGN-IN PAGE — the door every vendor with pages puts before them (docs/contributing/architecture.md, "Who is on a
+// screen"): a person names their account and gives their password, and the vendor's session cookie names them to every
+// page after. The page is a plain form rendered on the server, so submitting it posts and the vendor's redirect follows
+// with no script. A pack gives the vendor's words, its field names and where the form posts, and its skin the look; the
+// controls carry the vendor's labels so a test that finds them by label finds them.
+export type SignInProps = {
+  /** the page's heading, the vendor's words ("Sign in to GitHub") */
+  heading: string;
+  /** where the form posts, and the hidden fields the vendor's form carries (where to return to) */
+  action: string;
+  fields: Record<string, string>;
+  /** the account field and the password field: their names, labels and (the account's) prefilled value */
+  account: { name: string; label: string; value?: string };
+  password: { name: string; label: string };
+  submit: string;
+  /** the vendor's message for a refused attempt ("Incorrect username or password.") */
+  error?: string;
+};
+
+export function SignIn(props: SignInProps) {
+  return (
+    <main className="sign-in">
+      <div className="sign-in-mark" aria-hidden="true" />
+      <h1 className="sign-in-heading">{props.heading}</h1>
+      {props.error ? <div className="sign-in-error" role="alert">{props.error}</div> : null}
+      <form method="post" action={props.action} className="sign-in-box">
+        {Object.entries(props.fields).map(([name, value]) => <input key={name} type="hidden" name={name} value={value} />)}
+        <label htmlFor={props.account.name}>{props.account.label}</label>
+        <input id={props.account.name} name={props.account.name} type="text" autoComplete="username" defaultValue={props.account.value ?? ''} />
+        <label htmlFor={props.password.name}>{props.password.label}</label>
+        <input id={props.password.name} name={props.password.name} type="password" autoComplete="current-password" />
+        <button type="submit" className="sign-in-submit">{props.submit}</button>
+      </form>
+    </main>
+  );
+}
+
+/** A sign-in's second step, for a person who has two-factor authentication: after the right password the vendor asks
+ *  for the code their authenticator shows, on a page of its own. It lays out as the sign-in does (SIGN_IN_CSS). */
+export type SignInCodeProps = {
+  /** the page's heading and the line under it, the vendor's words */
+  heading: string;
+  hint: string;
+  action: string;
+  fields: Record<string, string>;
+  /** the code field: its name and label */
+  code: { name: string; label: string };
+  submit: string;
+  /** the vendor's message for a refused code */
+  error?: string;
+};
+
+export function SignInCode(props: SignInCodeProps) {
+  return (
+    <main className="sign-in">
+      <div className="sign-in-mark" aria-hidden="true" />
+      <h1 className="sign-in-heading">{props.heading}</h1>
+      {props.error ? <div className="sign-in-error" role="alert">{props.error}</div> : null}
+      <form method="post" action={props.action} className="sign-in-box">
+        {Object.entries(props.fields).map(([name, value]) => <input key={name} type="hidden" name={name} value={value} />)}
+        <label htmlFor={props.code.name}>{props.code.label}</label>
+        <input id={props.code.name} name={props.code.name} type="text" inputMode="numeric" autoComplete="one-time-code" />
+        <p className="sign-in-hint">{props.hint}</p>
+        <button type="submit" className="sign-in-submit">{props.submit}</button>
+      </form>
+    </main>
+  );
+}
+
+/** The sign-in page's layout; a pack's skin sets the colours and type over it. */
+export const SIGN_IN_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.sign-in { max-width: 340px; margin: 0 auto; padding: 32px 16px; }
+.sign-in-mark { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; }
+.sign-in-heading { text-align: center; font-weight: 300; font-size: 24px; margin: 0 0 16px; }
+.sign-in-error { border: 1px solid; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
+.sign-in-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid; border-radius: 6px; padding: 16px; }
+.sign-in-box input[type=text], .sign-in-box input[type=password] { font: inherit; padding: 5px 12px; border: 1px solid; border-radius: 6px; margin-bottom: 8px; }
+.sign-in-hint { margin: 0 0 8px; font-size: 12px; }
+.sign-in-submit { font: inherit; font-weight: 500; padding: 6px 16px; border-radius: 6px; border: 1px solid; cursor: pointer; }
+`;
+
+/** The value of the cookie `name` the request carries, as a browser sends it back. */
+export function cookieOf(request: Request, name: string): string | undefined {
+  for (const part of (request.headers.get('cookie') ?? '').split(';')) {
+    const at = part.indexOf('=');
+    if (at > 0 && part.slice(0, at).trim() === name) return decodeURIComponent(part.slice(at + 1).trim());
+  }
+  return undefined;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,33 @@
+import type { ReactElement } from 'react';
+export type TwinUiOptions = {
+    title: string;
+    /** the pack's client entry (a .tsx that calls mountTwinUi), resolved when first served */
+    clientEntry: () => string;
+    /** the pack's own stylesheet: its skin over the kit's */
+    css?: () => string;
+    /** the pack's fetch: every request that is not the UI's own is the vendor API */
+    api: (request: Request) => Promise<Response>;
+};
+export declare function twinUiHtml(title: string): string;
+/** The UI's routes (the shell, the client, the stylesheets) over the pack's API. */
+export declare function twinUiFetch(options: TwinUiOptions): (request: Request) => Promise<Response>;
+/** The UI on its own loopback port. Loopback-specific, so the port the kernel hands out is free on 127.0.0.1. */
+export declare function serveTwinUi(options: TwinUiOptions & {
+    port?: number;
+}): Promise<{
+    port: number;
+    stop: () => void;
+}>;
+/** A hosted flow's page (docs/contributing/architecture.md, "Screens"): rendered on the server at the
+ *  vendor's own host and path, its styles inline, so it needs no asset routes beside it. */
+export declare function flowPage(options: {
+    title: string;
+    css: string[];
+    body: ReactElement;
+    status?: number;
+    headers?: Record<string, string>;
+}): Response;
+export { Consent, CONSENT_CSS, type ConsentPermission, type ConsentProps } from '../client/consent.js';
+export { FORMAT_SCRIPT, Payment, PAYMENT_CSS, type PaymentField, type PaymentProps } from '../client/payment.js';
+export { Portal, PORTAL_CSS, type PortalAction, type PortalForm, type PortalItem, type PortalProps, type PortalSection } from '../client/portal.js';
+export { cookieOf, SignIn, SignInCode, SIGN_IN_CSS, type SignInCodeProps, type SignInProps } from '../client/sign-in.js';

package/dist/src/index.js

@@ -0,0 +1,56 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { brandTokensResponse, bundleClient, fileResponse, serveHttp } from '@volter/world-core';
+const KIT_CSS = () => new URL('../client/kit.css', import.meta.url).pathname;
+/** The brand's tokens and faces the kit's roles read (company decision 0018), fetched at build into client/brand/ (gitignored). */
+const BRAND_DIR = () => new URL('../client/brand', import.meta.url).pathname;
+export function twinUiHtml(title) {
+    const safe = title.replace(/[<>&"]/g, '');
+    return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<base href="/"><title>${safe}</title><link rel="stylesheet" href="assets/brand/tokens.css"><link rel="stylesheet" href="assets/kit.css"><link rel="stylesheet" href="assets/styles.css"></head>
+<body><div id="root"></div><script type="module" src="assets/app.js"></script></body></html>`;
+}
+/** The UI's routes (the shell, the client, the stylesheets) over the pack's API. */
+export function twinUiFetch(options) {
+    return async (request) => {
+        const url = new URL(request.url);
+        if (request.method === 'GET') {
+            if (url.pathname === '/' || url.pathname === '')
+                return new Response(twinUiHtml(options.title), { headers: { 'content-type': 'text/html; charset=utf-8' } });
+            if (url.pathname === '/assets/app.js') {
+                try {
+                    return new Response(await bundleClient(options.clientEntry()), { headers: { 'content-type': 'text/javascript; charset=utf-8' } });
+                }
+                catch (error) {
+                    return new Response(String(error), { status: 500 });
+                }
+            }
+            if (url.pathname.startsWith('/assets/brand/'))
+                return brandTokensResponse(BRAND_DIR(), url.pathname.slice('/assets/brand/'.length));
+            if (url.pathname === '/assets/kit.css')
+                return fileResponse(KIT_CSS(), { headers: { 'content-type': 'text/css; charset=utf-8' } });
+            if (url.pathname === '/assets/styles.css')
+                return options.css ? fileResponse(options.css(), { headers: { 'content-type': 'text/css; charset=utf-8' } }) : new Response('', { headers: { 'content-type': 'text/css; charset=utf-8' } });
+        }
+        return options.api(request);
+    };
+}
+/** The UI on its own loopback port. Loopback-specific, so the port the kernel hands out is free on 127.0.0.1. */
+export async function serveTwinUi(options) {
+    const server = await serveHttp({ hostname: '127.0.0.1', port: options.port ?? 0, idleTimeout: 60, fetch: twinUiFetch(options) });
+    return { port: server.port ?? options.port ?? 0, stop: () => server.stop(true) };
+}
+/** A hosted flow's page (docs/contributing/architecture.md, "Screens"): rendered on the server at the
+ *  vendor's own host and path, its styles inline, so it needs no asset routes beside it. */
+export function flowPage(options) {
+    const safe = options.title.replace(/[<>&"]/g, '');
+    const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${safe}</title>
+<style>${options.css.join('\n')}</style></head>
+<body>${renderToStaticMarkup(options.body)}</body></html>`;
+    return new Response(html, { status: options.status ?? 200, headers: { 'content-type': 'text/html; charset=utf-8', ...(options.headers ?? {}) } });
+}
+export { Consent, CONSENT_CSS } from "../client/consent.js";
+export { FORMAT_SCRIPT, Payment, PAYMENT_CSS } from "../client/payment.js";
+export { Portal, PORTAL_CSS } from "../client/portal.js";
+export { cookieOf, SignIn, SignInCode, SIGN_IN_CSS } from "../client/sign-in.js";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@volter/world-ui",
+  "version": "0.1.0",
+  "description": "Shared pieces and serving for derived packs' screens (hosted flows and workspaces), through each pack's own API; see docs/contributing/architecture.md, Screens.",
+  "license": "Apache-2.0",
+  "author": "Volter (https://github.com/volter-ai)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "node ../../scripts/publish/build.mjs",
+    "prepack": "bun ../../scripts/brand-tokens.ts client/brand && node ../../scripts/publish/prepare-publish.mjs prepack",
+    "postpack": "node ../../scripts/publish/prepare-publish.mjs postpack"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./kit": "./client/kit.tsx"
+  },
+  "files": [
+    "src",
+    "client",
+    "LICENSE",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@volter/world-core": "2.0.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/volter-ai/twin.git",
+    "directory": "packages/world-ui"
+  },
+  "homepage": "https://github.com/volter-ai/twin/tree/main/packages/world-ui#readme",
+  "engines": {
+    "node": ">=22.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,72 @@
+// THE TWIN UI SERVER — what every pack's vendor UI needs around its own client: the HTML shell, the
+// bundled client, its stylesheets, and the pack's own API behind the same origin, so the UI reads and
+// writes exactly what an SDK does (docs/contributing/architecture.md, "Protocol 3"). A pack gives
+// its title, its client entry and stylesheet, and its fetch; nothing here knows a vendor.
+import type { ReactElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { brandTokensResponse, bundleClient, fileResponse, serveHttp } from '@volter/world-core';
+
+export type TwinUiOptions = {
+  title: string;
+  /** the pack's client entry (a .tsx that calls mountTwinUi), resolved when first served */
+  clientEntry: () => string;
+  /** the pack's own stylesheet: its skin over the kit's */
+  css?: () => string;
+  /** the pack's fetch: every request that is not the UI's own is the vendor API */
+  api: (request: Request) => Promise<Response>;
+};
+
+const KIT_CSS = (): string => new URL('../client/kit.css', import.meta.url).pathname;
+/** The brand's tokens and faces the kit's roles read (company decision 0018), fetched at build into client/brand/ (gitignored). */
+const BRAND_DIR = (): string => new URL('../client/brand', import.meta.url).pathname;
+
+export function twinUiHtml(title: string): string {
+  const safe = title.replace(/[<>&"]/g, '');
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<base href="/"><title>${safe}</title><link rel="stylesheet" href="assets/brand/tokens.css"><link rel="stylesheet" href="assets/kit.css"><link rel="stylesheet" href="assets/styles.css"></head>
+<body><div id="root"></div><script type="module" src="assets/app.js"></script></body></html>`;
+}
+
+/** The UI's routes (the shell, the client, the stylesheets) over the pack's API. */
+export function twinUiFetch(options: TwinUiOptions): (request: Request) => Promise<Response> {
+  return async (request) => {
+    const url = new URL(request.url);
+    if (request.method === 'GET') {
+      if (url.pathname === '/' || url.pathname === '') return new Response(twinUiHtml(options.title), { headers: { 'content-type': 'text/html; charset=utf-8' } });
+      if (url.pathname === '/assets/app.js') {
+        try {
+          return new Response(await bundleClient(options.clientEntry()), { headers: { 'content-type': 'text/javascript; charset=utf-8' } });
+        } catch (error) {
+          return new Response(String(error), { status: 500 });
+        }
+      }
+      if (url.pathname.startsWith('/assets/brand/')) return brandTokensResponse(BRAND_DIR(), url.pathname.slice('/assets/brand/'.length));
+      if (url.pathname === '/assets/kit.css') return fileResponse(KIT_CSS(), { headers: { 'content-type': 'text/css; charset=utf-8' } });
+      if (url.pathname === '/assets/styles.css') return options.css ? fileResponse(options.css(), { headers: { 'content-type': 'text/css; charset=utf-8' } }) : new Response('', { headers: { 'content-type': 'text/css; charset=utf-8' } });
+    }
+    return options.api(request);
+  };
+}
+
+/** The UI on its own loopback port. Loopback-specific, so the port the kernel hands out is free on 127.0.0.1. */
+export async function serveTwinUi(options: TwinUiOptions & { port?: number }): Promise<{ port: number; stop: () => void }> {
+  const server = await serveHttp({ hostname: '127.0.0.1', port: options.port ?? 0, idleTimeout: 60, fetch: twinUiFetch(options) });
+  return { port: server.port ?? options.port ?? 0, stop: () => server.stop(true) };
+}
+
+/** A hosted flow's page (docs/contributing/architecture.md, "Screens"): rendered on the server at the
+ *  vendor's own host and path, its styles inline, so it needs no asset routes beside it. */
+export function flowPage(options: { title: string; css: string[]; body: ReactElement; status?: number; headers?: Record<string, string> }): Response {
+  const safe = options.title.replace(/[<>&"]/g, '');
+  const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${safe}</title>
+<style>${options.css.join('\n')}</style></head>
+<body>${renderToStaticMarkup(options.body)}</body></html>`;
+  return new Response(html, { status: options.status ?? 200, headers: { 'content-type': 'text/html; charset=utf-8', ...(options.headers ?? {}) } });
+}
+
+export { Consent, CONSENT_CSS, type ConsentPermission, type ConsentProps } from '../client/consent.tsx';
+export { FORMAT_SCRIPT, Payment, PAYMENT_CSS, type PaymentField, type PaymentProps } from '../client/payment.tsx';
+export { Portal, PORTAL_CSS, type PortalAction, type PortalForm, type PortalItem, type PortalProps, type PortalSection } from '../client/portal.tsx';
+export { cookieOf, SignIn, SignInCode, SIGN_IN_CSS, type SignInCodeProps, type SignInProps } from '../client/sign-in.tsx';