@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/table-view/column/column-key/ColumnKey.styles.js

@@ -0,0 +1,19 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/table-view/column/column-key/ColumnKey.styles.ts
+var key = css`
+  color: transparent;
+
+  &.pk {
+    color: var(--key-pk);
+  }
+
+  &.fk {
+    color: var(--key-fk);
+  }
+
+  &.pfk {
+    color: var(--key-pfk);
+  }
+`;
+//#endregion
+export { key };

package/dist/components/table-view/column/column-logical-name/ColumnLogicalName.d.ts

@@ -0,0 +1,22 @@
+import { FC, Ref } from '@dineug/r-html';
+import { AppContext } from '../../../appContext';
+export type ColumnLogicalNameProps = {
+    app?: Ref<AppContext>;
+    tableId: string;
+    /** The column whose logical name is edited, null for the table's own. */
+    columnId: string | null;
+    width: number;
+    value: string;
+    placeholder: string;
+    onInput?: (event: InputEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onEditEnd?: () => void;
+};
+/**
+ * The logical name editor of a header or a row: each key writes the text, the
+ * terms its start names drop under it, and a term picked writes it with its
+ * derivation; the name is derived once more as the editor closes on a change.
+ */
+declare const ColumnLogicalName: FC<ColumnLogicalNameProps>;
+export default ColumnLogicalName;
+//# sourceMappingURL=ColumnLogicalName.d.ts.map

package/dist/components/table-view/column/column-logical-name/ColumnLogicalName.js

@@ -0,0 +1,96 @@
+import { isComposing } from "../../../../utils/keyboard-shortcut/index.js";
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { onUnmounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { normalizeDictionaryName } from "../../../../engine/modules/dictionary/dictionaryIndex.js";
+import { deriveColumnNameAction$, deriveTableNameAction$, setColumnLogicalNameAction$, setTableLogicalNameAction$ } from "../../../../engine/modules/dictionary/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import Kbd from "../../../primitives/kbd/Kbd.js";
+import HighlightedText from "../../../primitives/highlighted-text/HighlightedText.js";
+import EditInput from "../../../primitives/edit-input/EditInput.js";
+import { hint, hintItem, root } from "./ColumnLogicalName.styles.js";
+import { useHintList } from "../useHintList.js";
+import { completeTerms, getTermIndex } from "../../../../engine/modules/dictionary/termIndex.js";
+//#region src/components/table-view/column/column-logical-name/ColumnLogicalName.tsx
+function heldLogicalName(state, tableId, columnId) {
+	const { doc, collections } = state;
+	if (!doc.tableIds.includes(tableId)) return null;
+	const table = query(collections).collection("tableEntities").selectById(tableId);
+	if (!table) return null;
+	if (columnId === null) return table.logicalName;
+	if (!table.columnIds.includes(columnId)) return null;
+	return query(collections).collection("tableColumnEntities").selectById(columnId)?.logicalName ?? null;
+}
+var ColumnLogicalName = (props, ctx) => {
+	const app = useAppContext(ctx, props.app?.value);
+	const state = observable({
+		rows: [],
+		index: -1
+	});
+	const list = useHintList(props, state);
+	const opened = props.value;
+	const setRows = (value) => {
+		const { store } = app.value;
+		state.index = -1;
+		state.rows = completeTerms(getTermIndex(store.state), value);
+	};
+	const handlePick = (index) => {
+		const term = state.rows[index];
+		if (!term) return;
+		const { store } = app.value;
+		const { tableId, columnId } = props;
+		const value = normalizeDictionaryName(term.name);
+		store.dispatch(columnId === null ? setTableLogicalNameAction$(tableId, value) : setColumnLogicalNameAction$(tableId, columnId, value));
+		setRows("");
+	};
+	const handleInput = (event) => {
+		const input = event.target;
+		input && setRows(input.value);
+		props.onInput?.(event);
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event) || !state.rows.length) return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				list.step(event.key === "ArrowUp" ? -1 : 1);
+				break;
+			case "Enter":
+				if (state.index === -1) return;
+				event.stopPropagation();
+				handlePick(state.index);
+				props.onEditEnd?.();
+				break;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				setRows("");
+		}
+	};
+	onUnmounted(() => {
+		const { store, lifecycle } = app.value;
+		if (lifecycle.destroyed) return;
+		const { tableId, columnId } = props;
+		const held = heldLogicalName(store.state, tableId, columnId);
+		if (held === null || held === opened) return;
+		store.dispatch(columnId === null ? deriveTableNameAction$(tableId) : deriveColumnNameAction$(tableId, columnId));
+	});
+	return () => {
+		const selected = state.index;
+		return html`<div class=${root} ${ref(list.root)} .dir="ltr" tabindex="-1" @focus=${list.handleFocus} @focusin=${list.handleFocus} @focusout=${list.handleFocusout}><${EditInput} .placeholder=${props.placeholder} .width=${props.width} .value=${props.value} .focus=${true} .edit=${true} .autofocus=${true} .onInput=${handleInput} .onKeydown=${handleKeydown} />${state.rows.length ? html`<div class=${[
+			"logical-name-hint",
+			"scrollbar",
+			hint
+		]} ${ref(list.hintList)} @mousedown=${list.handleHintMousedown} @touchstart=${list.handleHintTouchstart} @wheel=${list.handleHintWheel}>${repeat(state.rows, (term) => term.id, (term, index) => html`<div class=${[
+			"logical-name-hint-item",
+			hintItem,
+			{ selected: index === selected }
+		]} @click=${() => handlePick(index)}><span><${HighlightedText} .searchWords=${[props.value.trim()]} .textToHighlight=${term.name} /></span><${Kbd} .mini=${true} .shortcut="Enter" /></div>`)}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { ColumnLogicalName as default };

package/dist/components/table-view/column/column-logical-name/ColumnLogicalName.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hint: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hintItem: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=ColumnLogicalName.styles.d.ts.map

package/dist/components/table-view/column/column-logical-name/ColumnLogicalName.styles.js

@@ -0,0 +1,51 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../../styles/elevation.styles.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/table-view/column/column-logical-name/ColumnLogicalName.styles.ts
+var HINT_MAX_HEIGHT = 202;
+var root = css`
+  position: relative;
+  outline: none;
+`;
+var hint = css`
+  position: absolute;
+  z-index: 1;
+  top: ${20}px;
+  left: 0;
+  max-height: ${HINT_MAX_HEIGHT}px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--foreground);
+  background-color: var(--table-background);
+  border: ${1}px solid var(--table-border);
+  ${floatingShadow};
+  white-space: nowrap;
+  ${typography.paragraph};
+`;
+var hintItem = css`
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  height: ${20}px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--column-hover);
+  }
+
+  &.selected {
+    background-color: var(--column-select);
+
+    .kbd {
+      visibility: visible;
+    }
+  }
+
+  & > .kbd {
+    margin-left: auto;
+    padding-left: 6px;
+    visibility: hidden;
+  }
+`;
+//#endregion
+export { hint, hintItem, root };

package/dist/components/table-view/column/column-not-null/ColumnNotNull.js

@@ -0,0 +1,15 @@
+import { ColumnOption } from "../../../../constants/schema.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { bHas } from "../../../../utils/bit.js";
+import { useI18n } from "../../../localeContext.js";
+import { notNull } from "./ColumnNotNull.styles.js";
+//#region src/components/table-view/column/column-not-null/ColumnNotNull.tsx
+var ColumnNotNull = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`<div class=${[notNull, { focus: props.focus }]} style=${{
+		width: `35px`,
+		"min-width": `35px`
+	}} title=${i18n.value.t("common.column.notNull")} ?data-focus-border-bottom=${props.focus}>${bHas(props.options, ColumnOption.notNull) ? "N-N" : "NULL"}</div>`;
+};
+//#endregion
+export { ColumnNotNull as default };

package/dist/components/table-view/column/column-not-null/ColumnNotNull.styles.js

@@ -0,0 +1,22 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/table-view/column/column-not-null/ColumnNotNull.styles.ts
+var notNull = css`
+  display: inline-flex;
+  height: 20px;
+  box-sizing: border-box;
+  align-items: center;
+  color: var(--active);
+  background-color: transparent;
+  border-bottom: solid transparent 1.5px;
+  ${typography.paragraph};
+  line-height: normal;
+  cursor: default;
+  user-select: none;
+
+  &.focus {
+    border-bottom: solid var(--focus) 1.5px;
+  }
+`;
+//#endregion
+export { notNull };

package/dist/components/table-view/column/column-option/ColumnOption.js

@@ -0,0 +1,18 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { option } from "./ColumnOption.styles.js";
+//#region src/components/table-view/column/column-option/ColumnOption.tsx
+var ColumnOption = (props, ctx) => {
+	return () => html`<div class=${[
+		option,
+		{
+			focus: props.focus,
+			checked: props.checked
+		},
+		props.class
+	]} style=${{
+		width: `${props.width}px`,
+		"min-width": `${props.width}px`
+	}} title=${props.title} ?data-focus-border-bottom=${props.focus}>${props.text}</div>`;
+};
+//#endregion
+export { ColumnOption as default };

package/dist/components/table-view/column/column-option/ColumnOption.styles.js

@@ -0,0 +1,26 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/table-view/column/column-option/ColumnOption.styles.ts
+var option = css`
+  display: inline-flex;
+  height: 20px;
+  box-sizing: border-box;
+  align-items: center;
+  color: var(--placeholder);
+  background-color: transparent;
+  border-bottom: solid transparent 1.5px;
+  ${typography.paragraph};
+  line-height: normal;
+  cursor: default;
+  user-select: none;
+
+  &.focus {
+    border-bottom: solid var(--focus) 1.5px;
+  }
+
+  &.checked {
+    color: var(--active);
+  }
+`;
+//#endregion
+export { option };

package/dist/components/table-view/column/columnViewText.d.ts

@@ -0,0 +1,33 @@
+import { RootState } from '../../../engine/state';
+import { I18n, PlainMessageKey } from '../../../i18n/translate';
+import { Column } from '../../../internal-types';
+type ViewSettings = Pick<RootState['settings'], 'nameViewMode'>;
+type Names = {
+    name: string;
+    logicalName: string;
+};
+/** What a cell drawn in the DOM shows, the placeholder dimmed while the value is blank. */
+export type CellText = {
+    value: string;
+    placeholder: string;
+};
+/**
+ * What a logical name cell drawn in the DOM shows, as the canvas draws it: the
+ * logical name, or while it is blank the name in the logical view, that name's
+ * own placeholder while it is blank too, and in the view of both the logical name's.
+ */
+export declare function logicalNameCellText(settings: ViewSettings, { name, logicalName }: Names, nameKey: PlainMessageKey, { t }: Pick<I18n, 't'>): CellText;
+/** What the name cell of a row drawn in the DOM shows: the logical view puts the logical name there. */
+export declare function nameCellText(settings: ViewSettings, column: Names, i18n: Pick<I18n, 't'>): CellText;
+/**
+ * What the type cell of a row drawn in the DOM shows: the name of the listed
+ * domain it stands for in the logical view, else the type.
+ */
+export declare const typeCellText: (state: RootState, column: Pick<Column, "dataType" | "domainId">) => string;
+/**
+ * What the domain cell of a row drawn in the DOM holds: the listed domain's
+ * name, or nothing, over which the row dims the domain placeholder.
+ */
+export declare const domainCellText: (state: RootState, column: Pick<Column, "domainId">) => string;
+export {};
+//# sourceMappingURL=columnViewText.d.ts.map

package/dist/components/table-view/column/columnViewText.js

@@ -0,0 +1,23 @@
+import { getLiveDomainName } from "../../../engine/modules/dictionary/membership.js";
+import { drawsDomainInTypeCell, isLogicalNameView } from "../../../engine/modules/editor/utils/nameView.js";
+//#region src/components/table-view/column/columnViewText.ts
+function logicalNameCellText(settings, { name, logicalName }, nameKey, { t }) {
+	if (!isLogicalNameView(settings)) return {
+		value: logicalName,
+		placeholder: t("common.placeholder.logicalName")
+	};
+	return {
+		value: logicalName,
+		placeholder: name.trim() ? name : t(nameKey)
+	};
+}
+function nameCellText(settings, column, i18n) {
+	return isLogicalNameView(settings) ? logicalNameCellText(settings, column, "common.placeholder.column", i18n) : {
+		value: column.name,
+		placeholder: i18n.t("common.placeholder.column")
+	};
+}
+var typeCellText = (state, column) => drawsDomainInTypeCell(state, column) ? getLiveDomainName(state, column.domainId) : column.dataType;
+var domainCellText = (state, column) => getLiveDomainName(state, column.domainId);
+//#endregion
+export { domainCellText, logicalNameCellText, nameCellText, typeCellText };

package/dist/components/table-view/column/useColumnCell.js

@@ -0,0 +1,117 @@
+import { isComposing } from "../../../utils/keyboard-shortcut/index.js";
+import { arrayHas } from "../../../utils/arrayHas.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { changeColumnDataTypeAction$ } from "../../../engine/modules/table-column/generator.actions.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { DatabaseHintMap } from "../../../constants/sql/dataType/index.js";
+import { isEmpty } from "es-toolkit/compat";
+import Fues from "fuse.js";
+//#region src/components/table-view/column/useColumnCell.ts
+var hasAutocompleteKey = arrayHas([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Tab",
+	"Enter"
+]);
+var NAME_CHAR = /[a-z0-9_]/;
+function isPastTypeName(hints, value) {
+	const typed = value.trimStart().toLowerCase();
+	const names = hints.map((hint) => hint.name.toLowerCase());
+	return !names.some((name) => name.startsWith(typed)) && names.some((name) => typed.length > name.length && typed.startsWith(name) && !NAME_CHAR.test(typed[name.length]));
+}
+function searchDataTypeHints(hints, value) {
+	const newValue = value.trim();
+	if (isEmpty(newValue) || isPastTypeName(hints, value)) return [];
+	return new Fues(hints, { keys: ["name"] }).search(newValue).map((result) => result.item);
+}
+function useColumnCell(props, app) {
+	const state = observable({
+		hints: [],
+		index: -1
+	});
+	const { addUnsubscribe } = useUnmounted();
+	const setHints = (value) => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		const hints = DatabaseHintMap[settings.database] ?? [];
+		state.index = -1;
+		state.hints = searchDataTypeHints(hints, value);
+	};
+	const handleSelectHint = (index) => {
+		const hint = state.hints[index];
+		if (!hint) return;
+		const { store } = app.value;
+		store.dispatch(changeColumnDataTypeAction$({
+			id: props.columnId,
+			tableId: props.tableId,
+			value: hint.name
+		}));
+		setHints("");
+	};
+	const handleArrowUp = (event) => {
+		if (!state.hints.length) return;
+		event.preventDefault();
+		const index = state.index - 1;
+		state.index = index < 0 ? state.hints.length - 1 : index;
+	};
+	const handleArrowDown = (event) => {
+		if (!state.hints.length) return;
+		event.preventDefault();
+		const index = state.index + 1;
+		state.index = index > state.hints.length - 1 ? 0 : index;
+	};
+	const handleArrowLeft = (event) => {
+		state.index = -1;
+	};
+	const handleArrowRight = (event) => {
+		if (state.index === -1) return;
+		event.preventDefault();
+		handleSelectHint(state.index);
+	};
+	const handleTab = (event) => {
+		if (state.index === -1) return;
+		event.preventDefault();
+		event.stopPropagation();
+		handleSelectHint(state.index);
+	};
+	const handleEnter = (event) => {
+		if (state.index === -1) return;
+		event.stopPropagation();
+		handleSelectHint(state.index);
+		props.onEditEnd?.();
+	};
+	const keyMap = {
+		ArrowUp: handleArrowUp,
+		ArrowDown: handleArrowDown,
+		ArrowLeft: handleArrowLeft,
+		ArrowRight: handleArrowRight,
+		Tab: handleTab,
+		Enter: handleEnter
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event) || !hasAutocompleteKey(event.key)) return;
+		keyMap[event.key]?.(event);
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		addUnsubscribe(watch(props).subscribe((propName) => {
+			if (propName !== "edit") return;
+			!props.edit && setHints("");
+		}), watch(settings).subscribe((propName) => {
+			if (propName !== "database") return;
+			setHints(props.value);
+		}));
+	});
+	return {
+		state,
+		setHints,
+		handleSelectHint,
+		handleKeydown
+	};
+}
+//#endregion
+export { searchDataTypeHints, useColumnCell };

package/dist/components/table-view/column/useHintList.d.ts

@@ -0,0 +1,24 @@
+export type HintListProps = {
+    onBlur?: (event: FocusEvent) => void;
+};
+/** The rows a list under a cell editor offers, and the one the keyboard is on, -1 for none. */
+export type HintListState = {
+    rows: ReadonlyArray<unknown>;
+    index: number;
+};
+/**
+ * The focus, pointer and scroll handling a cell editor with a list under its
+ * input shares with the data type cell: a press on the list keeps the caret,
+ * the wheel it scrolls by stays off the canvas, and the keyboard row stays in view.
+ */
+export declare function useHintList(props: HintListProps, state: HintListState): {
+    root: import('@dineug/r-html').Ref<HTMLDivElement>;
+    hintList: import('@dineug/r-html').Ref<HTMLDivElement>;
+    handleFocus: () => void;
+    handleFocusout: (event: FocusEvent) => void;
+    handleHintMousedown: (event: MouseEvent) => void;
+    handleHintTouchstart: (event: TouchEvent) => void;
+    handleHintWheel: (event: WheelEvent) => void;
+    step: (delta: 1 | -1) => void;
+};
+//# sourceMappingURL=useHintList.d.ts.map

package/dist/components/table-view/column/useHintList.js

@@ -0,0 +1,83 @@
+import { isMod } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted, onUnmounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } from "../../../r-html/dist/observable/index.js";
+import { createRef } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { lastCursorFocus } from "../../../utils/focus.js";
+//#region src/components/table-view/column/useHintList.ts
+function useHintList(props, state) {
+	const root = createRef();
+	const hintList = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	let currentFocus = false;
+	let timerId;
+	let pendingBlur = null;
+	const handleFocus = () => {
+		currentFocus = true;
+	};
+	const settleFocusout = () => {
+		clearTimeout(timerId);
+		const event = pendingBlur;
+		if (!event) return;
+		pendingBlur = null;
+		const input = root.value?.querySelector("input");
+		currentFocus && input ? lastCursorFocus(input) : props.onBlur?.(event);
+	};
+	const handleFocusout = (event) => {
+		currentFocus = false;
+		pendingBlur = event;
+		clearTimeout(timerId);
+		timerId = setTimeout(settleFocusout, 1);
+	};
+	onUnmounted(settleFocusout);
+	const handleHintMousedown = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const handleHintTouchstart = (event) => {
+		event.stopPropagation();
+	};
+	const handleHintWheel = (event) => {
+		if (isMod(event) || event.ctrlKey) return;
+		const { deltaX, deltaY } = event;
+		if (deltaY === 0 || Math.abs(deltaY) < Math.abs(deltaX) || event.shiftKey && deltaX === 0) return;
+		const el = hintList.value;
+		if (!el || el.scrollHeight <= el.clientHeight) return;
+		event.stopPropagation();
+	};
+	const keepIndexInView = () => {
+		const el = hintList.value;
+		if (!el || state.index === -1) return;
+		const top = state.index * 20;
+		const bottom = top + 20;
+		if (top < el.scrollTop) el.scrollTop = top;
+		else if (bottom > el.scrollTop + el.clientHeight) el.scrollTop = bottom - el.clientHeight;
+	};
+	const handleState = (propName) => {
+		const el = hintList.value;
+		if (el && propName === "rows") el.scrollTop = 0;
+		if (propName === "index") keepIndexInView();
+	};
+	onMounted(() => {
+		addUnsubscribe(watch(state).subscribe(handleState));
+		keepIndexInView();
+	});
+	const step = (delta) => {
+		const { length } = state.rows;
+		if (!length) return;
+		const index = state.index + delta;
+		state.index = index < 0 ? length - 1 : index >= length ? 0 : index;
+	};
+	return {
+		root,
+		hintList,
+		handleFocus,
+		handleFocusout,
+		handleHintMousedown,
+		handleHintTouchstart,
+		handleHintWheel,
+		step
+	};
+}
+//#endregion
+export { useHintList };

package/dist/components/theme/Theme.d.ts

@@ -3,6 +3,11 @@ import { Theme } from '../../themes/tokens';
 export type ThemeProps = {
     theme: Theme;
 };
+/**
+ * The theme's tokens on its element: a sheet of its shadow root's own, which a
+ * strict CSP lets through, or a <style> element where the browser adopts no
+ * constructed sheet or the theme renders outside an element's shadow root.
+ */
 declare const Theme: FC<ThemeProps>;
 export default Theme;
 //# sourceMappingURL=Theme.d.ts.map

package/dist/components/theme/Theme.js

@@ -0,0 +1,20 @@
+import { onUnmounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { adoptHostSheet, canAdoptStyleSheets } from "../../r-html/dist/template/vCSSStyleSheet.js";
+import { themeToTokensString } from "../../themes/tokens.js";
+//#region src/components/theme/Theme.tsx
+var tokensRule = (theme) => `:host {
+${themeToTokensString(theme)}
+}`;
+var Theme = (props, ctx) => {
+	const sheet = canAdoptStyleSheets() ? new CSSStyleSheet() : null;
+	const drop = sheet ? adoptHostSheet(ctx.host, sheet) : null;
+	if (!sheet || !drop) return () => html`<style>${tokensRule(props.theme)}</style>`;
+	onUnmounted(drop);
+	return () => {
+		sheet.replaceSync(tokensRule(props.theme));
+		return null;
+	};
+};
+//#endregion
+export { Theme as default };