@plitzi/sdk-elements 0.38.13 → 0.38.14

package/CHANGELOG.md

@@ -1,5 +1,158 @@
 # @plitzi/sdk-elements
 
+## 0.38.14
+
+### Patch Changes
+
+- 493955a: ## SDK
+
+  - **An embedded space leaves the page's theme alone** (`@plitzi/plitzi-sdk`, `@plitzi/plitzi-builder`): plitzi-ui's
+    `Provider` stamps `dark` on `<html>` by default — and, being `light`, takes it off — so every space mounted with
+    `themeScope: 'container'` turned the page around it light, and nothing put it back. The SDK and the builder now leave
+    the class to their own theme provider (`applyColorModeClass={false}`).
+  - **A space inside a space** (`@plitzi/plitzi-sdk`, `@plitzi/sdk-shared`): one drawn inside another — the `plitziSdk`
+    element, a plugin rendering one, the builder's canvas — knows it (`render.enclosed`). It is `container` unless it
+    says otherwise, wears its theme on its own root and starts from the page's when its own is `system`, keeps its
+    stylesheet to its own root (`@scope` — its `:root` palette and `.dark` rules repainted the outer page, its
+    `.plitzi-sdk` rule restyled the outer root), writes no `<title>` (`ownsHead`) and no `theme` cookie.
+  - **The `plitziSdk` element draws** (`@plitzi/plitzi-sdk`): it rendered in `widget` mode with no page to show, so it
+    drew nothing. A widget with no `currentPageId` now shows the page its home address would. And it takes a space's
+    documents as well as a key: `offlineData`, bound whole (an `apiContainer`'s answer, a runtime's route, what
+    `plitzi_render` returns) or as `offlineData.schema` and `offlineData.style` from two elements — waiting, without an
+    error, for the half that has not answered; one that cannot be drawn is said why, in the console and on the canvas.
+  - **`<PlitziSdk>` inside a plugin draws** (`@plitzi/plitzi-sdk`): it mounted a router of its own inside the page's, and
+    React Router refused it — `routing: 'memory'` or not. A space inside another is a widget: `raw` becomes `widget`
+    there, one page and no router (a frame of its own, `iframe` or `shadow`, is left as asked).
+  - **A space inside another is as tall as what it holds** (`@plitzi/plitzi-sdk`): its root was `min-h-screen`, as a
+    space that IS the page is, so a card of three lines drawn in a panel took the window's height.
+  - **`<PlitziSdk.Plugin component>` takes a component with its own props** (`@plitzi/plitzi-sdk`), as `render()`'s
+    plugins do: typed `ComponentPluginFC`, it refused any component that read its attributes.
+  - **An edited page keeps its address in step** (`@plitzi/plitzi-sdk`): the routes are built from the pages' own
+    elements, and those were read again only when the list of pages changed — an edit to one page (its slug, its flag)
+    leaves that list the same, and the routes kept its old address until something else rebuilt them.
+  - **Packages declare only what they use** (`@plitzi/sdk-dev-tools`, `@plitzi/sdk-shared`): `@plitzi/sdk-plugins`, which
+    the dev tools no longer import, and `terser`, which no build here runs, are no longer dependencies.
+  - **An edited page keeps its route up to date** (`@plitzi/plitzi-sdk`): the routes are built from the pages' own
+    elements, which were read again only when the list of pages changed — an edit to one page (its slug, its flag) left
+    the list the same and the route at the old address. They follow every edit to a page now, and stay the same object
+    while no page changes.
+  - **`@plitzi/sdk-dev-tools` no longer depends on `@plitzi/sdk-plugins`**, which nothing in it imports.
+  - **A dropdown's menu opens inside a card that lifts or clips** (`@plitzi/sdk-elements`, `@plitzi/sdk-shared`): drawn
+    inside the dropdown, an ancestor with a `transform` — a card lifting on hover — made itself the containing block of
+    the menu's `position: fixed`, and one with `overflow: hidden` cut it off: the menu opened and nobody saw it. The open
+    menu and its backdrop are drawn at the space's root (`spaceRootOf`, `@plitzi/sdk-shared/helpers/spaceRoot`); a
+    style written for the popup by an ancestor's selector no longer reaches it — its own classes do.
+  - **A copy button says when it could not copy** (`@plitzi/sdk-elements`, `@plitzi/sdk-shared`,
+    `@plitzi/sdk-interactions`, `@plitzi/sdk-variables`, `@plitzi/sdk-dev-tools`): a page not served over https has no
+    clipboard — a phone opening a development server by its address — and a code block's "Copy" threw there. It reads
+    "Not copied", and says why. `clipboardWriter` and `copyText` (`@plitzi/sdk-shared/helpers/clipboard`) are the one
+    check, the `copyToClipboard` step's too.
+
+  ## Authoring
+  - **`plitziSdk` is authored like any element** (`@plitzi/sdk-authoring`, `@plitzi/sdk-elements`): its declaration moved
+    to `@plitzi/sdk-elements` beside the others, so it has a factory — `plitziSdk({ id, bind: { offlineData: 'view.data'
+} })` —, its attributes typed, and `plitzi explain` knows it.
+  - **A binding may write part of an attribute** (`@plitzi/sdk-authoring`): `offlineData.schema` writes into
+    `offlineData`, as the runtime always did; authoring refused it as an attribute nothing reads.
+  - **`choosesChildren`** (`@plitzi/sdk-shared`, `@plitzi/sdk-authoring`): a plugin that shows only some of the elements
+    put inside it — a dashboard's panels, a wizard's step — says so in its declaration, and the page checks owe none of
+    them on screen; what it draws is still read by the checks of the whole page (images, sideways scroll, legibility).
+    `verify` was red on every such page.
+
+  - **A page says how the document scrolls** (`@plitzi/sdk-elements`, `@plitzi/sdk-authoring`, `@plitzi/sdk-mcp`):
+    `documentScroll: 'locked'` holds the document still while the page is open — a dashboard or a board used with a
+    finger, where the whole page was dragged and bounced back though nothing in it scrolls — and `'noBounce'` keeps the
+    scroll without the rubber band or pull-to-refresh. The page draws the rule itself, so it is in the server's HTML and
+    leaves with the page; never inside a widget, a space drawn in another, or the builder's canvas. A Settings select,
+    `PageSpec.documentScroll`, `upsertPage`'s `documentScroll` (`null` undoes it) and the page read; an unknown value is
+    refused (`attribute-value`). `upsertPage` is now held to the lint of the page it writes, as element writes are.
+
+  ## MCP
+  - **`@plitzi/sdk-mcp/render`** (`@plitzi/sdk-mcp`): `plitzi_render`'s widget render on its own — no MCP server, no SSR,
+    no OAuth — for a project whose own agent draws in its own pages: `render`, `renderWidgetShape` to declare it as a
+    tool, `renderGuideText` for the agent. `base`, the style of the project's space, brings its tokens, classes and fonts
+    to the widget.
+
+  ## Server
+  - **`publicUrl` says where people reach the server** (`@plitzi/sdk-server`): it was `http://127.0.0.1:<port>` whatever
+    the server was. It is `https` once `serverOptions.tls` gives it a certificate, and this machine's network address
+    with `HOST` open to the network (what a tablet opens, what an OAuth provider sends it back to); `PUBLIC_URL` still
+    wins. The network addresses it prints say `https` too.
+  - **A server serving TLS reaches itself** (`@plitzi/sdk-server`): with a local certificate (mkcert) Node trusts nothing
+    the browsers were told to, so a runtime calling its own MCP failed. Its requests to its own address now connect to its
+    listener and are taken when it presents exactly its certificate (`reachOwnServer`, exported from `/runtime`).
+  - **A runtime reads compressed answers again** (`@plitzi/sdk-server`): the dispatcher `reachOwnServer` (and the
+    platform's `reachSpaceInside`) installs reached every other host with an undici connector that offers HTTP/2, and an
+    answer that came back over h2 reached Node's `fetch` without its `content-encoding` — every API that compresses read
+    as Brotli bytes. Other hosts are reached over HTTP/1.1 now, as Node's own `fetch` reaches them.
+  - **A project's server serves HTTPS from `.env`** (`@plitzi/sdk-server`, `@plitzi/sdk-shared`): `TLS_CERT` and
+    `TLS_KEY`, the certificate's and the key's paths — what `plitzi cert` writes — with no code of the project's;
+    `serverOptions.tls` still wins. A network address the certificate does not name is said at boot, the machine's
+    `.local` name is printed among the addresses when it is named, and a server on loopback alone says how to open it to
+    the network.
+  - **A session survives a phone on the Wi-Fi** (`@plitzi/sdk-server`): a private network address (`192.168.…`, `10.…`,
+    Tailscale's `100.64/10`, IPv6 unique- and link-local) and a machine's mDNS name (`studio.local`) get the local
+    cookie profile — `SameSite=Lax`, no `Secure`, no `Domain`. They got `SameSite=None; Secure`, which a browser drops
+    over http: nobody could sign in from a tablet. A deployment's own `.local` sub-domains (`app.example.local`) keep the
+    strict profile.
+  - **Hiding the dev tools on a server over HTTPS hydrates** (`@plitzi/sdk-server`): a server with a certificate speaks
+    HTTP/2, which sends no `Host` — only `:authority` — and the cookies named for the origin's port (the dev tools'
+    `plitzi_debug_<port>`, forced flags, painted state) were looked for without it. Shift+F12 hid the dev tools in the
+    browser, the server rendered them back, and the page failed to hydrate. Every one is read off `requestAuthority`.
+  - **A rebuild of plugins says it finished** (`@plitzi/sdk-server`): bundles removed under a running server (`tmp/`
+    deleted) were each a warning, "rebuilding…", and their "ready" at a level a project's terminal does not show. It is
+    one episode now: said when noticed, and again when the last is built — how many, how long, which failed.
+  - **`tmp/dev-server.json` records the scheme** (`@plitzi/sdk-server`): `url` is `https` with a certificate, and the
+    file adds the network addresses and the `publicUrl`.
+  - **`public/` is asked about every time** (`@plitzi/sdk-server`): it was cached for an hour — a `.js` or `.css` in it
+    for a year, `immutable` — so a file a project rewrites while it runs arrived stale. It is `no-cache` now, answered
+    `304` by its `ETag` while unchanged; `immutable` stays for what is versioned (the SDK, the plugins).
+
+  ## CLI
+  - **`check`, `shot`, `verify` and `visual` find a server on HTTPS** (`@plitzi/cli`): they rebuilt
+    `http://127.0.0.1:<port>`, so a project serving a certificate had no page checked. They read the URL `npm start`
+    recorded, and take a local certificate on this machine only. A project's `playwright.config.ts` comes from
+    `plitzi upgrade`.
+  - **`verify` runs the project's tests** (`@plitzi/cli`): a step `test`, after the lint, when `package.json` has a
+    `test` script.
+  - **`tsconfig.json` is the project's** (`@plitzi/cli`): the compiler options moved to `plitzi/tsconfig.base.json`, which
+    the CLI keeps up and `tsconfig.json` extends — so a folder of the project's own (`scripts/`, `tools/`) goes in its
+    `include` without changing a file of the CLI's. `plitzi doctor --fix` makes an older `tsconfig.json` extend it,
+    keeping only the options the project changed.
+  - **`doctor --fix` and `upgrade` write as the project's Prettier does** (`@plitzi/cli`): a repaired `tsconfig.json` or
+    `package.json` left `verify`'s format step red.
+  - **`upgrade` renames `usePlitziServiceContext`** (`@plitzi/cli`): with `PlitziServiceProvider` and
+    `PlitziServiceContextValue`, renamed in 0.38.12 with no alias — import, use and the module path that named it.
+  - **`skills update` compares every file** (`@plitzi/cli`): only `SKILL.md` was, so a change in a reference alone was
+    "up to date".
+  - **`NOTES.md`, the project's notes for agents** (`@plitzi/cli`): `AGENTS.md` and `CLAUDE.md` are the CLI's and
+    `upgrade` replaces them, so what a project's own sessions had to know had nowhere to live. `CLAUDE.md` imports
+    `NOTES.md`, `AGENTS.md` sends every agent to it, and nothing the CLI does touches it; `doctor --fix` writes one for
+    a project that has none.
+
+  - **`start:dev-inspect`** (`@plitzi/cli`): a server project's `start:dev` with Node's inspector open on
+    127.0.0.1:9229, so a debugger (VS Code, `chrome://inspect`) attaches to the server, and again after each restart.
+    `plitzi upgrade` adds it; `plitzi runtime add` has it restart on the runtime too.
+  - **`plitzi cert`** (`@plitzi/cli`): HTTPS while developing, for a phone or a tablet on the Wi-Fi — over http its
+    browser gives a page no microphone, camera or clipboard. A certificate from mkcert's local authority for this machine,
+    its network addresses and its `.local` name, in `tmp/tls/`, named in `.env`; what to install on the phone, said.
+  - **A browser project opens to the network** (`@plitzi/cli`): its `vite.config.ts` reads `HOST`, `TLS_CERT` and
+    `TLS_KEY` from `.env`, as a server project does, and writes `tmp/dev-server.json` — the port Vite took and the scheme
+    — so `page check`, `page shot` and `visual` find it on another port or over HTTPS. `plitzi upgrade` brings it.
+
+  ## Docs
+  - **Two plugins share through `state`** (`@plitzi/sdk-authoring` skill): each plugin is a bundle of its own, so a module
+    both import is two copies, and what one keeps there the other never sees.
+  - **`verify --help`** names the project's tests among its steps.
+
+- Updated dependencies [493955a]
+  - @plitzi/sdk-auth@0.38.14
+  - @plitzi/sdk-event-bridge@0.38.14
+  - @plitzi/sdk-interactions@0.38.14
+  - @plitzi/sdk-navigation@0.38.14
+  - @plitzi/sdk-schema@0.38.14
+  - @plitzi/sdk-shared@0.38.14
+
 ## 0.38.13
 
 ### Patch Changes

package/dist/components/MarkdownDocument/components/CodeBlock/CodeBlock.mjs

@@ -1,34 +1,40 @@
 import { useCallback as e, useEffect as t, useState as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import a from "clsx";
+import { NOT_COPIED_REASON as o, copyText as s } from "@plitzi/sdk-shared/helpers/clipboard";
 //#region src/components/MarkdownDocument/components/CodeBlock/CodeBlock.tsx
-var o = 2e3, s = ({ language: s, code: c, classNames: l, children: u }) => {
-	let [d, f] = n(!1);
+var c = 2e3, l = {
+	idle: "Copy",
+	copied: "Copied",
+	refused: "Not copied"
+}, u = ({ language: u, code: d, classNames: f, children: p }) => {
+	let [m, h] = n("idle");
 	t(() => {
-		if (!d) return;
-		let e = setTimeout(() => f(!1), o);
+		if (m === "idle") return;
+		let e = setTimeout(() => h("idle"), c);
 		return () => clearTimeout(e);
+	}, [m]);
+	let g = e(() => {
+		s(d).then((e) => h(e ? "copied" : "refused"));
 	}, [d]);
-	let p = e(() => {
-		navigator.clipboard.writeText(c).then(() => f(!0));
-	}, [c]);
 	return /* @__PURE__ */ i("div", {
-		className: a("markdown-code", l.codeBlockFrame),
-		"data-language": s,
+		className: a("markdown-code", f.codeBlockFrame),
+		"data-language": u,
 		children: [/* @__PURE__ */ i("div", {
-			className: a("markdown-code-header", l.codeBlockHeader),
+			className: a("markdown-code-header", f.codeBlockHeader),
 			children: [/* @__PURE__ */ r("span", {
-				className: a("markdown-code-language", l.codeBlockLanguage),
-				children: s ?? "text"
+				className: a("markdown-code-language", f.codeBlockLanguage),
+				children: u ?? "text"
 			}), /* @__PURE__ */ r("button", {
 				type: "button",
-				className: a("markdown-code-copy", l.codeBlockCopy),
-				onClick: p,
+				className: a("markdown-code-copy", f.codeBlockCopy),
+				onClick: g,
 				"aria-live": "polite",
-				children: d ? "Copied" : "Copy"
+				title: m === "refused" ? o : void 0,
+				children: l[m]
 			})]
-		}), u]
+		}), p]
 	});
 };
 //#endregion
-export { s as default };
+export { u as default };

package/dist/elements/advanced/PlitziSdk/Settings.mjs

@@ -7,33 +7,48 @@ var a = ({ spaceKey: a = "", environment: o = "main", onUpdate: s }) => {
 	let c = e(s);
 	return /* @__PURE__ */ n("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: [/* @__PURE__ */ t(r, {
-			value: a,
-			label: "Space Key",
-			onChange: c.text("spaceKey")
-		}), /* @__PURE__ */ n(i, {
-			value: o,
-			label: "Environment",
-			onChange: c.text("environment"),
-			children: [
-				/* @__PURE__ */ t("option", {
-					value: "main",
-					children: "Main"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "development",
-					children: "Development"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "staging",
-					children: "Staging"
-				}),
-				/* @__PURE__ */ t("option", {
-					value: "production",
-					children: "Production"
-				})
-			]
-		})]
+		children: [
+			/* @__PURE__ */ t(r, {
+				value: a,
+				label: "Space Key",
+				onChange: c.text("spaceKey")
+			}),
+			/* @__PURE__ */ n(i, {
+				value: o,
+				label: "Environment",
+				onChange: c.text("environment"),
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "main",
+						children: "Main"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "development",
+						children: "Development"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "staging",
+						children: "Staging"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "production",
+						children: "Production"
+					})
+				]
+			}),
+			/* @__PURE__ */ n("p", {
+				className: "text-xs",
+				children: [
+					"Or bind ",
+					/* @__PURE__ */ t("code", { children: "offlineData" }),
+					" to a space's documents — an API's answer, a runtime's route — or",
+					/* @__PURE__ */ t("code", { children: "offlineData.schema" }),
+					" and ",
+					/* @__PURE__ */ t("code", { children: "offlineData.style" }),
+					" from two elements, to draw it with no backend; the key is then not read."
+				]
+			})
+		]
 	});
 };
 //#endregion

package/dist/elements/advanced/PlitziSdk/declaration.d.ts

@@ -0,0 +1,39 @@
+import { Environment, OfflineDataRaw } from '@plitzi/sdk-shared';
+/** What this element can be authored with. */
+export type PlitziSdkAttributes = {
+    /** The space drawn, fetched by its key. */
+    spaceKey?: string;
+    environment?: Environment;
+    /**
+     * The space drawn from its documents instead — `schema` and `style` with its compiled `cache`, what `plitzi_render`
+     * answers — with no backend behind it: UI generated on the fly, a preview. Usually bound: whole, to an
+     * `apiContainer`'s answer or a runtime's route, or `offlineData.schema` and `offlineData.style` from two elements.
+     * With it, `spaceKey` is not read.
+     */
+    offlineData?: OfflineDataRaw;
+};
+declare const declaration: import('@plitzi/sdk-shared/authoring/declare').DeclaredElement<{
+    readonly type: "plitziSdk";
+    readonly content: {
+        readonly attributes: {
+            readonly spaceKey: "";
+            readonly environment: "main";
+        };
+        readonly definition: {
+            readonly label: "Plitzi Sdk";
+            readonly description: "Another space drawn inside this one, as a widget — its home page, no router of its own: by its key, or from its documents (`offlineData`), bound to UI generated on the fly.";
+        };
+        readonly market: {
+            readonly category: "advanced";
+            readonly icon: "https://cdn.plitzi.com/resources/img/favicon.svg";
+        };
+        readonly defaultStyle: {
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+    };
+}, PlitziSdkAttributes>;
+export default declaration;

package/dist/elements/advanced/PlitziSdk/declaration.mjs

@@ -0,0 +1,22 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/advanced/PlitziSdk/declaration.ts
+var t = e()({
+	type: "plitziSdk",
+	content: {
+		attributes: {
+			spaceKey: "",
+			environment: "main"
+		},
+		definition: {
+			label: "Plitzi Sdk",
+			description: "Another space drawn inside this one, as a widget — its home page, no router of its own: by its key, or from its documents (`offlineData`), bound to UI generated on the fly."
+		},
+		market: {
+			category: "advanced",
+			icon: "https://cdn.plitzi.com/resources/img/favicon.svg"
+		},
+		defaultStyle: { style: { base: { default: {} } } }
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Dropdown/Dropdown.d.ts

@@ -12,7 +12,7 @@ export type DropdownProps = {
     containerLeftOffset?: number;
     disabled?: boolean;
 };
-declare const Dropdown: ({ ref, children, className, popupPlacement, openPopup, backgroundDisabled, closeOnClickBackground, closeOnClickPopup, containerTopOffset, containerLeftOffset, disabled }: DropdownProps) => import('react').JSX.Element;
+declare const Dropdown: ({ ref: refProp, children, className, popupPlacement, openPopup, backgroundDisabled, closeOnClickBackground, closeOnClickPopup, containerTopOffset, containerLeftOffset, disabled }: DropdownProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<DropdownProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Dropdown/Dropdown.mjs

@@ -4,64 +4,78 @@ import { RootElement as n } from "../../../Element/RootElement.mjs";
 import r from "./DropdownContext.mjs";
 import i from "./useDropdown.mjs";
 import a from "./useDropdownTrigger.mjs";
-import { useCallback as o, useMemo as s, useRef as c } from "react";
-import l from "@plitzi/sdk-shared/hooks/usePlitzi";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import f from "clsx";
+import { useCallback as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import d from "@plitzi/sdk-shared/hooks/usePlitzi";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+import { createPortal as h } from "react-dom";
+import { spaceRootOf as g } from "@plitzi/sdk-shared/helpers/spaceRoot";
 //#region src/elements/basic/Dropdown/Dropdown.tsx
-var p = ({ ref: e, children: p, className: m = "", popupPlacement: h = "bottom", openPopup: g = !1, backgroundDisabled: _ = !1, closeOnClickBackground: v = !0, closeOnClickPopup: y = !0, containerTopOffset: b = 5, containerLeftOffset: x = 5, disabled: S = !1 }) => {
-	let { setElementState: C, definition: { styleSelectors: w } } = t(), { settings: { previewMode: T }, utils: { getWindow: E } } = l(), D = c(null), O = c(null), k = s(() => E(), [E]), A = o((e) => {
-		v && (e.stopPropagation(), e.preventDefault(), C((e) => ({
+var _ = ({ ref: e, children: _, className: v = "", popupPlacement: y = "bottom", openPopup: b = !1, backgroundDisabled: x = !1, closeOnClickBackground: S = !0, closeOnClickPopup: C = !0, containerTopOffset: w = 5, containerLeftOffset: T = 5, disabled: E = !1 }) => {
+	let { setElementState: D, definition: { styleSelectors: O } } = t(), { settings: { previewMode: k }, utils: { getWindow: A } } = d(), j = l(null), M = e ?? j, N = l(null), P = l(null), F = c(() => A(), [A]), I = o((e) => {
+		S && (e.stopPropagation(), e.preventDefault(), D((e) => ({
 			...e,
 			openPopup: !1
 		})));
-	}, [v, C]), j = o((e) => {
-		C((t) => ({
+	}, [S, D]), L = o((e) => {
+		D((t) => ({
 			...t,
 			openPopup: e
 		}));
-	}, [C]), [, , M, N, , P] = i({
-		ref: e,
-		popupRef: D,
-		open: g,
-		disabled: !T || S,
-		closeOnClickPopup: y,
-		closeOnClickOutside: v && !_,
-		placement: h,
-		offsetX: x,
-		offsetY: b,
-		myWindow: k,
-		onChange: j
-	}), F = a({
-		popupRef: D,
-		open: g,
-		positioned: !!P,
-		enabled: !!T && !S
-	}), I = o((e) => {
-		F(e), M(e);
-	}, [F, M]), L = s(() => ({
-		popupRef: D,
-		openPopup: g,
-		parameters: P,
-		onClick: N
-	}), [
-		N,
-		g,
-		P
+	}, [D]), [, , R, z, , B] = i({
+		ref: M,
+		popupRef: N,
+		open: b,
+		disabled: !k || E,
+		closeOnClickPopup: C,
+		closeOnClickOutside: S && !x,
+		placement: y,
+		offsetX: T,
+		offsetY: w,
+		myWindow: F,
+		onChange: L
+	}), [V, H] = u(null);
+	s(() => {
+		b && k && !V && H(g(M.current));
+	}, [
+		b,
+		k,
+		V,
+		M
 	]);
-	return /* @__PURE__ */ d(n, {
-		ref: e,
-		className: f("plitzi-component__dropdown", m, { "container--empty--skip": !T && !p }),
-		onClick: I,
-		children: [/* @__PURE__ */ u(r, {
-			value: L,
-			children: p
-		}), g && _ && T && /* @__PURE__ */ u("div", {
-			ref: O,
-			className: f("plitzi-component__dropdown__background-container", w.backgroundContainer),
-			onClick: A
-		})]
+	let U = k ? V : null, W = a({
+		rootRef: M,
+		popupRef: N,
+		open: b,
+		positioned: !!B,
+		enabled: !!k && !E
+	}), G = o((e) => {
+		W(e), R(e);
+	}, [W, R]), K = c(() => ({
+		popupRef: N,
+		openPopup: b,
+		parameters: B,
+		onClick: z,
+		layer: U
+	}), [
+		z,
+		b,
+		B,
+		U
+	]), q = b && x && k && /* @__PURE__ */ f("div", {
+		ref: P,
+		className: m("plitzi-component__dropdown__background-container", O.backgroundContainer),
+		onClick: I
+	});
+	return /* @__PURE__ */ p(n, {
+		ref: M,
+		className: m("plitzi-component__dropdown", v, { "container--empty--skip": !k && !_ }),
+		onClick: G,
+		children: [/* @__PURE__ */ f(r, {
+			value: K,
+			children: _
+		}), q && U ? h(q, U) : q]
 	});
-}, m = e(p);
+}, v = e(_);
 //#endregion
-export { p as Dropdown, m as default };
+export { _ as Dropdown, v as default };

package/dist/elements/basic/Dropdown/DropdownContext.d.ts

@@ -5,6 +5,8 @@ export type DropdownContextValue = {
     openPopup: boolean;
     parameters?: FloatingPosition;
     onClick: (e: MouseEvent) => void;
+    /** Where the open popup is drawn instead of in place: the space's root, once the menu has opened (see `Dropdown`). */
+    layer: HTMLElement | null;
 };
 declare const DropdownContext: import('react').Context<DropdownContextValue>;
 export default DropdownContext;

package/dist/elements/basic/Dropdown/DropdownPopup/DropdownPopup.mjs

@@ -4,16 +4,19 @@ import n from "../DropdownContext.mjs";
 import { use as r, useImperativeHandle as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 import o from "clsx";
+import { createPortal as s } from "react-dom";
 //#region src/elements/basic/Dropdown/DropdownPopup/DropdownPopup.tsx
-var s = ({ ref: e, className: s = "", children: c }) => {
-	let { popupRef: l, openPopup: u, parameters: d, onClick: f } = r(n);
-	return i(e, () => l.current ?? null, [l]), /* @__PURE__ */ a(t, {
-		ref: l,
-		className: o("plitzi-component__dropdown-popup", s, { "popup-container--no-visible": !u || !d }),
-		style: d,
-		onClick: f,
-		children: c
+var c = ({ ref: e, className: c = "", children: l }) => {
+	let { popupRef: u, openPopup: d, parameters: f, onClick: p, layer: m } = r(n);
+	i(e, () => u.current ?? null, [u]);
+	let h = /* @__PURE__ */ a(t, {
+		ref: u,
+		className: o("plitzi-component__dropdown-popup", c, { "popup-container--no-visible": !d || !f }),
+		style: f,
+		onClick: p,
+		children: l
 	});
-}, c = e(s);
+	return m ? s(h, m) : h;
+}, l = e(c);
 //#endregion
-export { s as DropdownPopup, c as default };
+export { c as DropdownPopup, l as default };

package/dist/elements/basic/Dropdown/useDropdownTrigger.d.ts

@@ -1,5 +1,7 @@
 import { MouseEvent, RefObject } from 'react';
 export type UseDropdownTriggerProps = {
+    /** The dropdown's own element, where its trigger is. */
+    rootRef?: RefObject<HTMLElement | null>;
     popupRef: RefObject<HTMLElement | null>;
     open: boolean;
     /** Where the popup is drawn; until it is known the popup is hidden, and nothing in it can take the focus. */
@@ -22,5 +24,5 @@ export type UseDropdownTriggerProps = {
  *
  * @returns what the dropdown's own click handler calls first, to learn whether a keyboard pressed the trigger.
  */
-declare const useDropdownTrigger: ({ popupRef, open, positioned, enabled }: UseDropdownTriggerProps) => ((event: MouseEvent) => void);
+declare const useDropdownTrigger: ({ rootRef, popupRef, open, positioned, enabled }: UseDropdownTriggerProps) => ((event: MouseEvent) => void);
 export default useDropdownTrigger;

package/dist/elements/basic/Dropdown/useDropdownTrigger.mjs

@@ -1,30 +1,28 @@
 import { useCallback as e, useEffect as t, useRef as n } from "react";
 //#region src/elements/basic/Dropdown/useDropdownTrigger.ts
-var r = "button, a[href], input, select, textarea, [role=\"button\"]", i = (e) => {
-	let t = e?.closest(".plitzi-component__dropdown");
-	return t ? [...t.querySelectorAll(r)].find((t) => !e?.contains(t)) : void 0;
-}, a = ({ popupRef: a, open: o, positioned: s, enabled: c }) => {
-	let l = n(!1), u = n(o), d = e((e) => {
-		l.current = e.detail === 0;
+var r = "button, a[href], input, select, textarea, [role=\"button\"]", i = (e, t) => e ? [...e.querySelectorAll(r)].find((e) => !t?.contains(e)) : void 0, a = ({ rootRef: a, popupRef: o, open: s, positioned: c, enabled: l }) => {
+	let u = n(!1), d = n(s), f = e((e) => {
+		u.current = e.detail === 0;
 	}, []);
 	return t(() => {
-		let e = c ? i(a.current) : void 0;
-		e && (e.setAttribute("aria-haspopup", "true"), e.setAttribute("aria-expanded", String(o)));
+		let e = l ? i(a?.current, o.current) : void 0;
+		e && (e.setAttribute("aria-haspopup", "true"), e.setAttribute("aria-expanded", String(s)));
 	}), t(() => {
-		let e = a.current, t = u.current && !o;
-		if (u.current = o, c && e) {
+		let e = o.current, t = d.current && !s;
+		if (d.current = s, l && e) {
 			if (t && e.contains(e.ownerDocument.activeElement)) {
-				i(e)?.focus({ preventScroll: !0 });
+				i(a?.current, e)?.focus({ preventScroll: !0 });
 				return;
 			}
-			o && s && l.current && !e.contains(e.ownerDocument.activeElement) && (l.current = !1, e.querySelector(r)?.focus({ preventScroll: !0 }));
+			s && c && u.current && !e.contains(e.ownerDocument.activeElement) && (u.current = !1, e.querySelector(r)?.focus({ preventScroll: !0 }));
 		}
 	}, [
+		l,
+		s,
 		c,
 		o,
-		s,
 		a
-	]), d;
+	]), f;
 };
 //#endregion
 export { a as default };