feat(widgets,wrappers): the one-tag embed takes the proxy routes, and a base property can no longer skip the wrappers

The widget bootstrap forwarded neither submit-url nor location-url, so the
simplest embed was the publishable-key path only. It now forwards both from one
list that also keeps them out of the request parameters, and a tag with no key
renders the form and routes both its requests at the host.

remember never reached React or Vue. A base property that is missing from the
wrapper prop list regenerates byte-identical, so no gate could see it. The base
element now states its own public surface: every property carrying an attribute
has to be declared, which leaves reactive state out by the same rule.

Author: ph33nx

AGENTS.md

@@ -377,7 +377,7 @@ For a static chart with no picker, fetch in a Server Component and pass `data` t
 
 `<roxy-endpoint-form>` reads the OpenAPI spec and renders the inputs for any endpoint. On `roxy-submit`, POST the validated values to your own route, which calls the SDK with the secret key, then set the returned data on the target component. For an endpoint that needs coordinates, add `publishable-key="pk_live_..."` so the built-in city search can geocode.
 
-The city search is the one request the form issues on its own, while a visitor is still typing. When the page routes RoxyAPI traffic through your own server, give it a route for that search and name it with `location-url` (absolute, or relative to the page). Then the form calls your server for cities too, and no key of any kind reaches the browser. The same attribute works on any component in self-fetch mode, alongside `submit-url`.
+The city search is the one request the form issues on its own, while a visitor is still typing. When the page routes RoxyAPI traffic through your own server, give it a route for that search and name it with `location-url` (absolute, or relative to the page). Then the form calls your server for cities too, and no key of any kind reaches the browser. The same attribute works on any component in self-fetch mode, alongside `submit-url`, and on a one-tag widget as `data-location-url`.
 
 ```html
 <roxy-endpoint-form
@@ -421,7 +421,7 @@ In React, the same props are typed: `<RoxyNatalChart endpoint="astrology/natal-c
 
 **Three optional attributes on the self-fetch element.** `lang` sets the response language (`en`, `tr`, `de`, `es`, `hi`, `pt`, `fr`, `ru`): put it on the element (`<roxy-horoscope-card lang="de" ...>`) and the form routes it to the `?lang=` query on submit, so visitors never see a language field. `submit-label` overrides the derived button label. `attribution` renders a small "Spiritual data by RoxyAPI" credit under the result: off by default, and the one-tag script below turns it on unless you set `data-attribution="off"`. None of these apply in controlled mode.
 
-**One tag, no element wiring.** For the simplest embed, load `dist/cdn/widgets.js` and drop a `<div data-roxy-widget="{slug}" data-publishable-key="pk_live_...">`. The script mounts the matching component from a generated slug map: with every path parameter supplied as a `data-*` attribute (`data-sign`, `data-id`) it fetches on mount, otherwise it renders the same input form. A second `data-*` attribute picks a variant (`data-period`, `data-mode`, `data-type`, `data-spread`).
+**One tag, no element wiring.** For the simplest embed, load `dist/cdn/widgets.js` and drop a `<div data-roxy-widget="{slug}" data-publishable-key="pk_live_...">`. The script mounts the matching component from a generated slug map: with every path parameter supplied as a `data-*` attribute (`data-sign`, `data-id`) it fetches on mount, otherwise it renders the same input form. A second `data-*` attribute picks a variant (`data-period`, `data-mode`, `data-type`, `data-spread`). To keep every key on your own server instead, drop the publishable key and give the tag `data-submit-url` and `data-location-url`: the widget renders the form and routes both its requests there.
 
 **Theme every widget in one link.** Add `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css">` for a warm rosewater serif look, or set the `--roxy-font-display` token alone to swap result headings to a display face (it defaults to the body font, so nothing changes until you set it). See [THEMING.md](packages/ui/THEMING.md).
 

README.md

@@ -602,7 +602,7 @@ Two ways to feed a component, and the key rule for each:
 
 Set `ROXY_API_KEY` to your secret key in your server env for the server-side SDK examples on this page. For self-fetch embedding with no backend, use a publishable key (see the fully client-side pattern in [`AGENTS.md`](AGENTS.md)).
 
-The self-fetch form renders spec-driven inputs (a zodiac tile picker, a boolean toggle, native date and time, a city search), collapses optional fields under one Advanced disclosure, and reads a `lang` attribute for localized responses. When the page routes RoxyAPI traffic through your own server instead, `submit-url` names the route that answers the submitted request and `location-url` names the one that answers the city search, so both halves of a birth-data form go to your server and no key of any kind reaches the browser. For the simplest embed, load `dist/cdn/widgets.js` and drop one `<div data-roxy-widget="{slug}" data-publishable-key="pk_live_...">`: with the required attributes present it fetches on mount, otherwise it renders the form. A single `<link>` to the [practitioner theme preset](https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css) restyles every widget on the page.
+The self-fetch form renders spec-driven inputs (a zodiac tile picker, a boolean toggle, native date and time, a city search), collapses optional fields under one Advanced disclosure, and reads a `lang` attribute for localized responses. When the page routes RoxyAPI traffic through your own server instead, `submit-url` names the route that answers the submitted request and `location-url` names the one that answers the city search, so both halves of a birth-data form go to your server and no key of any kind reaches the browser. For the simplest embed, load `dist/cdn/widgets.js` and drop one `<div data-roxy-widget="{slug}" data-publishable-key="pk_live_...">`: with the required attributes present it fetches on mount, otherwise it renders the form. That tag takes `data-submit-url` and `data-location-url` too, so a one-tag embed can route both its requests through your server and carry no key at all. A single `<link>` to the [practitioner theme preset](https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css) restyles every widget on the page.
 
 ## Distribution
 

packages/ui-react/src/components/angel-number-card.tsx

@@ -30,6 +30,8 @@ export interface RoxyAngelNumberCardProps extends ElementAttrs {
 	lang?: string;
 	/** Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast). */
 	submitLabel?: string;
+	/** Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default. */
+	remember?: boolean;
 	/** Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode. */
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
@@ -40,7 +42,7 @@ export interface RoxyAngelNumberCardProps extends ElementAttrs {
 }
 
 export const RoxyAngelNumberCard = React.forwardRef<HTMLElement | null, RoxyAngelNumberCardProps>(
-	function RoxyAngelNumberCard({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
+	function RoxyAngelNumberCard({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, remember, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -135,6 +137,13 @@ export const RoxyAngelNumberCard = React.forwardRef<HTMLElement | null, RoxyAnge
 			}
 		}, [submitLabel, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && remember !== undefined) {
+				(el as unknown as { remember: boolean }).remember = remember;
+			}
+		}, [remember, loaded]);
+
 		React.useEffect(() => {
 			const el = internal.current;
 			if (el && attribution !== undefined) {

packages/ui-react/src/components/angel-number-lookup.tsx

@@ -30,6 +30,8 @@ export interface RoxyAngelNumberLookupProps extends ElementAttrs {
 	lang?: string;
 	/** Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast). */
 	submitLabel?: string;
+	/** Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default. */
+	remember?: boolean;
 	/** Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode. */
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
@@ -40,7 +42,7 @@ export interface RoxyAngelNumberLookupProps extends ElementAttrs {
 }
 
 export const RoxyAngelNumberLookup = React.forwardRef<HTMLElement | null, RoxyAngelNumberLookupProps>(
-	function RoxyAngelNumberLookup({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
+	function RoxyAngelNumberLookup({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, remember, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -135,6 +137,13 @@ export const RoxyAngelNumberLookup = React.forwardRef<HTMLElement | null, RoxyAn
 			}
 		}, [submitLabel, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && remember !== undefined) {
+				(el as unknown as { remember: boolean }).remember = remember;
+			}
+		}, [remember, loaded]);
+
 		React.useEffect(() => {
 			const el = internal.current;
 			if (el && attribution !== undefined) {

packages/ui-react/src/components/arudha-padas.tsx

@@ -30,6 +30,8 @@ export interface RoxyArudhaPadasProps extends ElementAttrs {
 	lang?: string;
 	/** Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast). */
 	submitLabel?: string;
+	/** Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default. */
+	remember?: boolean;
 	/** Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode. */
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
@@ -40,7 +42,7 @@ export interface RoxyArudhaPadasProps extends ElementAttrs {
 }
 
 export const RoxyArudhaPadas = React.forwardRef<HTMLElement | null, RoxyArudhaPadasProps>(
-	function RoxyArudhaPadas({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
+	function RoxyArudhaPadas({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, remember, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -135,6 +137,13 @@ export const RoxyArudhaPadas = React.forwardRef<HTMLElement | null, RoxyArudhaPa
 			}
 		}, [submitLabel, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && remember !== undefined) {
+				(el as unknown as { remember: boolean }).remember = remember;
+			}
+		}, [remember, loaded]);
+
 		React.useEffect(() => {
 			const el = internal.current;
 			if (el && attribution !== undefined) {

packages/ui-react/src/components/ashtakavarga-grid.tsx

@@ -30,6 +30,8 @@ export interface RoxyAshtakavargaGridProps extends ElementAttrs {
 	lang?: string;
 	/** Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast). */
 	submitLabel?: string;
+	/** Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default. */
+	remember?: boolean;
 	/** Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode. */
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
@@ -40,7 +42,7 @@ export interface RoxyAshtakavargaGridProps extends ElementAttrs {
 }
 
 export const RoxyAshtakavargaGrid = React.forwardRef<HTMLElement | null, RoxyAshtakavargaGridProps>(
-	function RoxyAshtakavargaGrid({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
+	function RoxyAshtakavargaGrid({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, remember, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -135,6 +137,13 @@ export const RoxyAshtakavargaGrid = React.forwardRef<HTMLElement | null, RoxyAsh
 			}
 		}, [submitLabel, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && remember !== undefined) {
+				(el as unknown as { remember: boolean }).remember = remember;
+			}
+		}, [remember, loaded]);
+
 		React.useEffect(() => {
 			const el = internal.current;
 			if (el && attribution !== undefined) {

packages/ui-react/src/components/aspects-table.tsx

@@ -30,6 +30,8 @@ export interface RoxyAspectsTableProps extends ElementAttrs {
 	lang?: string;
 	/** Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast). */
 	submitLabel?: string;
+	/** Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default. */
+	remember?: boolean;
 	/** Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode. */
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
@@ -40,7 +42,7 @@ export interface RoxyAspectsTableProps extends ElementAttrs {
 }
 
 export const RoxyAspectsTable = React.forwardRef<HTMLElement | null, RoxyAspectsTableProps>(
-	function RoxyAspectsTable({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
+	function RoxyAspectsTable({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, remember, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -135,6 +137,13 @@ export const RoxyAspectsTable = React.forwardRef<HTMLElement | null, RoxyAspects
 			}
 		}, [submitLabel, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && remember !== undefined) {
+				(el as unknown as { remember: boolean }).remember = remember;
+			}
+		}, [remember, loaded]);
+
 		React.useEffect(() => {
 			const el = internal.current;
 			if (el && attribution !== undefined) {

packages/ui-react/src/components/astrocartography-map.tsx

@@ -30,6 +30,8 @@ export interface RoxyAstrocartographyMapProps extends ElementAttrs {
 	lang?: string;
 	/** Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast). */
 	submitLabel?: string;
+	/** Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default. */
+	remember?: boolean;
 	/** Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode. */
 	attribution?: string;
 	/** Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely. */
@@ -40,7 +42,7 @@ export interface RoxyAstrocartographyMapProps extends ElementAttrs {
 }
 
 export const RoxyAstrocartographyMap = React.forwardRef<HTMLElement | null, RoxyAstrocartographyMapProps>(
-	function RoxyAstrocartographyMap({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, attribution, hideReadings, hideSections, ...rest }, ref) {
+	function RoxyAstrocartographyMap({ data, className, style, endpoint, method, publishableKey, baseUrl, submitUrl, locationUrl, specUrl, lang, submitLabel, remember, attribution, hideReadings, hideSections, ...rest }, ref) {
 		const internal = React.useRef<HTMLElement | null>(null);
 		React.useImperativeHandle<HTMLElement | null, HTMLElement | null>(
 			ref,
@@ -135,6 +137,13 @@ export const RoxyAstrocartographyMap = React.forwardRef<HTMLElement | null, Roxy
 			}
 		}, [submitLabel, loaded]);
 
+		React.useEffect(() => {
+			const el = internal.current;
+			if (el && remember !== undefined) {
+				(el as unknown as { remember: boolean }).remember = remember;
+			}
+		}, [remember, loaded]);
+
 		React.useEffect(() => {
 			const el = internal.current;
 			if (el && attribution !== undefined) {