@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/primitives/separator/Separator.js

@@ -0,0 +1,14 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { horizontal, separator } from "./Separator.styles.js";
+//#region src/components/primitives/separator/Separator.tsx
+var Separator = (props, ctx) => {
+	return () => html`<div style=${{
+		"padding-left": `${props.padding ?? 0}px`,
+		"padding-right": `${props.padding ?? 0}px`
+	}}><div class=${[separator, horizontal]} style=${{
+		"margin-top": `${props.space ?? 0}px`,
+		"margin-bottom": `${props.space ?? 0}px`
+	}}></div></div>`;
+};
+//#endregion
+export { Separator as default };

package/dist/components/primitives/separator/Separator.styles.js

@@ -0,0 +1,11 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/separator/Separator.styles.ts
+var separator = css`
+  background-color: var(--gray-color-6);
+`;
+var horizontal = css`
+  width: 100%;
+  height: 1px;
+`;
+//#endregion
+export { horizontal, separator };

package/dist/components/primitives/slider/Slider.js

@@ -0,0 +1,42 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { range as range$1, root, thumb, track } from "./Slider.styles.js";
+import { clamp } from "es-toolkit";
+import { round } from "es-toolkit/compat";
+//#region src/components/primitives/slider/Slider.tsx
+var Slider = (props, ctx) => {
+	const root$1 = createRef();
+	const clientXToValue = (clientX) => {
+		const rect = root$1.value.getBoundingClientRect();
+		const x = clientX - rect.x;
+		const ratioValue = round(x / rect.width, 2);
+		const max = props.max - props.min;
+		const inRange = (value) => clamp(value, props.min, props.max);
+		return inRange(round(max * ratioValue) + props.min);
+	};
+	const handleMove = ({ event, x }) => {
+		event.type === "mousemove" && event.preventDefault();
+		const value = clientXToValue(x);
+		if (value !== props.value) props.onChange(value);
+	};
+	const handleMoveStart = (event) => {
+		drag$.subscribe(handleMove);
+	};
+	const handleMousedown = (event) => {
+		const value = clientXToValue(event.clientX);
+		if (value !== props.value) props.onChange(value);
+		handleMoveStart(event);
+	};
+	return () => {
+		const max = props.max - props.min;
+		const value = props.value - props.min;
+		const ratioValue = round(value / max, 2);
+		const percent = ratioValue * 100;
+		const right = `${100 - percent}%`;
+		const left = `calc(${percent}% - ${12 * ratioValue}px)`;
+		return html`<div class=${root} .dir="ltr" ${ref(root$1)} @mousedown=${handleMousedown}><div class=${track}><div class=${range$1} style=${{ right }}></div></div><div class=${thumb} style=${{ left }} @mousedown=${handleMoveStart}></div></div>`;
+	};
+};
+//#endregion
+export { Slider as default };

package/dist/components/primitives/slider/Slider.styles.js

@@ -0,0 +1,58 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/slider/Slider.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 12px;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+`;
+var track = css`
+  width: 100%;
+  height: 8px;
+  background-color: var(--gray-color-3);
+  box-shadow: inset 0 0 0 1px var(--gray-color-6);
+  overflow: hidden;
+  position: relative;
+  border-radius: 9999px;
+`;
+var range = css`
+  position: absolute;
+  border-radius: inherit;
+  background-color: var(--accent-color-9);
+  box-shadow: inset 0 0 0 1px var(--gray-color-6);
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
+var thumb = css`
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  border-radius: 9999px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: calc(12px * 3);
+    height: calc(12px * 3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    border-radius: 9999px;
+    inset: calc(-0.25 * 8px);
+    box-shadow: inset 0 0 0 1px var(--gray-color-6);
+    cursor: pointer;
+  }
+`;
+//#endregion
+export { range, root, thumb, track };

package/dist/components/primitives/switch/Switch.d.ts

@@ -2,6 +2,8 @@ import { FC } from '@dineug/r-html';
 export type SwitchProps = {
     size?: '1' | '2' | '3';
     value: boolean;
+    /** Shows the value and takes no press, as a field a reader may not change does. */
+    disabled?: boolean;
     onChange: (value: boolean) => void;
 };
 declare const Switch: FC<SwitchProps>;

package/dist/components/primitives/switch/Switch.js

@@ -0,0 +1,11 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { Switch_styles_exports, switchButton, switchThumb } from "./Switch.styles.js";
+//#region src/components/primitives/switch/Switch.tsx
+var Switch = (props, ctx) => {
+	const handleChange = () => {
+		props.onChange(!props.value);
+	};
+	return () => html`<button class=${[switchButton, Reflect.get(Switch_styles_exports, `size${props.size ?? "2"}`)]} type="button" .dir="ltr" role="switch" aria-checked=${props.value ? "true" : "false"} data-checked=${props.value} ?disabled=${props.disabled} @click=${props.disabled ? null : handleChange}><span class=${switchThumb} ?data-checked=${props.value}></span></button>`;
+};
+//#endregion
+export { Switch as default };

package/dist/components/primitives/switch/Switch.styles.js

@@ -0,0 +1,117 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/switch/Switch.styles.ts
+var Switch_styles_exports = /* @__PURE__ */ __exportAll({
+	size1: () => size1,
+	size2: () => size2,
+	size3: () => size3,
+	switchButton: () => switchButton,
+	switchThumb: () => switchThumb
+});
+var switchButton = css`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  border-radius: 9999px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    transition: background-position, background-color, box-shadow, filter;
+    transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
+    background-repeat: no-repeat;
+    background-color: var(--gray-color-3);
+    background-image: linear-gradient(
+      to right,
+      var(--accent-color-9) 40%,
+      transparent 60%
+    );
+    box-shadow: inset 0 0 0 1px var(--gray-color-6);
+  }
+
+  &[data-checked='true']::before {
+    transition-duration: 0.16s, 0.14s, 0.14s, 0.14s;
+    background-position: 0;
+  }
+
+  &[data-checked='false']::before {
+    transition-duration: 0.12s, 0.14s, 0.14s, 0.14s;
+    background-position-x: 100%;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var size1 = css`
+  width: 28px;
+  height: 16px;
+
+  &::before {
+    background-size: calc(28px * 2 + 16px) 100%;
+  }
+
+  & > span {
+    width: 14px;
+    height: 14px;
+  }
+
+  & > span[data-checked] {
+    transform: translateX(calc(28px - 14px - 1px));
+  }
+`;
+var size2 = css`
+  width: 35px;
+  height: 20px;
+
+  &::before {
+    background-size: calc(35px * 2 + 20px) 100%;
+  }
+
+  & > span {
+    width: 18px;
+    height: 18px;
+  }
+
+  & > span[data-checked] {
+    transform: translateX(calc(35px - 18px - 1px));
+  }
+`;
+var size3 = css`
+  width: 42px;
+  height: 24px;
+
+  &::before {
+    background-size: calc(42px * 2 + 24px) 100%;
+  }
+
+  & > span {
+    width: 22px;
+    height: 22px;
+  }
+
+  & > span[data-checked] {
+    transform: translateX(calc(42px - 22px - 1px));
+  }
+`;
+var switchThumb = css`
+  background-color: #fff;
+  position: relative;
+  border-radius: 9999px;
+  box-shadow:
+    0 0 1px 1px rgba(0, 0, 0, 0.1),
+    0 1px 1px rgba(0, 0, 0, 0.05),
+    0 2px 4px -1px rgba(0, 0, 0, 0.15);
+  transition:
+    transform 0.14s cubic-bezier(0.45, 0.05, 0.55, 0.95),
+    box-shadow 0.14s ease-in-out;
+  transform: translateX(1px);
+`;
+//#endregion
+export { Switch_styles_exports, size1, size2, size3, switchButton, switchThumb };

package/dist/components/primitives/text-input/TextInput.js

@@ -0,0 +1,25 @@
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { restAttrs } from "../../../utils/attribute.js";
+import { onNumberOnly } from "../../../utils/domEvent.js";
+import { lastCursorFocus } from "../../../utils/focus.js";
+//#region src/components/primitives/text-input/TextInput.tsx
+var directionOf = ({ dir, value }) => dir ? { dir: value ? dir : "" } : {};
+var TextInput = (props, ctx) => {
+	const input = createRef();
+	onMounted(() => {
+		const $input = input.value;
+		if (!props.autofocus || !$input) return;
+		lastCursorFocus($input);
+	});
+	return () => html`<input ${ref(input)} class=${props.class} style=${{ width: props.width ? `${props.width}px` : "" }} ...${{
+		...restAttrs({
+			title: props.title,
+			placeholder: props.placeholder
+		}),
+		...directionOf(props)
+	}} type="text" spellcheck="false" ?readonly=${props.readonly} ?disabled=${props.disabled} .value=${props.value ?? ""} @input=${props.numberOnly ? onNumberOnly : null} @input=${props.onInput} @change=${props.onChange} @blur=${props.onBlur} @keyup=${props.onKeyup} @keydown=${props.onKeydown} />`;
+};
+//#endregion
+export { TextInput as default };

package/dist/components/primitives/toast/Toast.js

@@ -0,0 +1,24 @@
+import { html, svg } from "../../../r-html/dist/render/index.js";
+import Icon from "../icon/Icon.js";
+import { action, description, indicator, root, textWrap, title } from "./Toast.styles.js";
+import { clamp } from "es-toolkit";
+//#region src/components/primitives/toast/Toast.tsx
+var RING_SIZE = 16;
+var RING_RADIUS = 6;
+var RING_LENGTH = 2 * Math.PI * RING_RADIUS;
+var progressInRange = (value) => clamp(value, 0, 1);
+var TONE_ICON = {
+	success: "check",
+	error: "triangle-alert"
+};
+var ring = (fraction) => svg`<svg viewBox=${`0 0 ${RING_SIZE} ${RING_SIZE}`} fill="none" stroke-width="2"><circle data-part="track" cx=${RING_SIZE / 2} cy=${RING_SIZE / 2} r=${RING_RADIUS} /><circle data-part="arc" cx=${RING_SIZE / 2} cy=${RING_SIZE / 2} r=${RING_RADIUS} stroke-dasharray=${RING_LENGTH} stroke-dashoffset=${RING_LENGTH * (1 - fraction)} stroke-linecap="round" transform=${`rotate(-90 ${RING_SIZE / 2} ${RING_SIZE / 2})`} /></svg>`;
+var Toast = (props, ctx) => {
+	return () => {
+		const showText = props.title || props.description;
+		const showButton = props.action;
+		const fraction = typeof props.progress === "number" ? progressInRange(props.progress) : null;
+		return html`<div class=${root}>${fraction !== null ? html`<div class=${indicator} role="progressbar" aria-valuemin="0" aria-valuemax="1" aria-valuenow=${fraction}>${ring(fraction)}</div>` : props.busy ? html`<div class=${indicator} role="progressbar" aria-busy="true" data-busy="true"><${Icon} .name="loader-circle" .size=${RING_SIZE} /></div>` : props.tone ? html`<div class=${indicator} data-tone=${props.tone} aria-hidden="true"><${Icon} .name=${TONE_ICON[props.tone]} .size=${RING_SIZE} /></div>` : null}${showText ? html`<div class=${textWrap}>${props.title ? html`<div class=${title}>${props.title}</div>` : null}${props.description ? html`<div class=${description}>${props.description}</div>` : null}</div>` : null}${showButton ? html`<div class=${action}>${props.action}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { Toast as default };

package/dist/components/primitives/toast/Toast.styles.js

@@ -0,0 +1,87 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { fontSize2, typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/toast/Toast.styles.ts
+var root = css`
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  width: fit-content;
+  padding: 15px;
+  background-color: var(--toast-background);
+  border: 1px solid var(--toast-border);
+  ${floatingShadow};
+`;
+var indicator = css`
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 12px;
+  color: var(--active);
+
+  & svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  & [data-part='track'] {
+    stroke: var(--toast-border);
+  }
+
+  & [data-part='arc'] {
+    stroke: currentColor;
+    transition: stroke-dashoffset 0.2s;
+  }
+
+  &[data-busy] svg {
+    animation: toastSpin 0.9s linear infinite;
+  }
+
+  &[data-tone='success'] {
+    color: var(--toast-success);
+  }
+
+  &[data-tone='error'] {
+    color: var(--toast-error);
+  }
+
+  @keyframes toastSpin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var textWrap = css`
+  overflow-wrap: anywhere;
+
+  & > div {
+    margin-bottom: 5px;
+  }
+
+  & > div:last-child {
+    margin-bottom: 0;
+  }
+`;
+var title = css`
+  color: var(--active);
+  font-weight: var(--font-weight-medium);
+  ${fontSize2};
+`;
+var description = css`
+  ${typography.paragraph};
+`;
+var action = css`
+  display: flex;
+  margin-inline-start: 15px;
+
+  & > button {
+    margin-inline-start: 8px;
+  }
+
+  & > button:first-child {
+    margin-inline-start: 0;
+  }
+`;
+//#endregion
+export { action, description, indicator, root, textWrap, title };

package/dist/components/primitives/tree/Tree.js

@@ -0,0 +1,182 @@
+import { onMounted, onUpdated } 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 { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { repeat } from "../../../r-html/dist/render/directives/node/repeat.js";
+import Icon from "../icon/Icon.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { offsetToShow, visibleRange } from "../../../utils/virtualRange.js";
+import { root, row, space, twisty } from "./Tree.styles.js";
+import { moveFocus } from "./treeModel.js";
+var TREE_INDENT = 12;
+var TREE_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"Enter",
+	" "
+]);
+var treeCount = 0;
+var Tree = (props) => {
+	const prefix = `tree-${++treeCount}`;
+	const root$1 = createRef();
+	const view = observable({
+		first: 0,
+		last: -1
+	});
+	const measured = {
+		scrollTop: 0,
+		height: 0
+	};
+	const { addUnsubscribe } = useUnmounted();
+	let revealed = null;
+	let mounted = false;
+	let leftWithWindow = false;
+	const domId = (id) => `${prefix}:${id}`;
+	const indexOf = (id) => id ? props.rows.findIndex((row) => row.node.id === id) : -1;
+	const rangeNow = () => {
+		const count = props.rows.length;
+		const maxScrollTop = Math.max(0, count * 22 - measured.height);
+		return visibleRange(count, Math.min(measured.scrollTop, maxScrollTop), measured.height, 22);
+	};
+	const syncRange = () => {
+		const { first, last } = rangeNow();
+		if (first !== view.first) view.first = first;
+		if (last !== view.last) view.last = last;
+	};
+	const scrollTo = (top) => {
+		const $root = root$1.value;
+		if (!$root) return;
+		const before = measured.scrollTop;
+		$root.scrollTop = top;
+		measured.scrollTop = $root.scrollTop;
+		syncRange();
+		if (measured.scrollTop !== before) props.onScroll?.(measured.scrollTop);
+	};
+	const scrollToIndex = (index) => {
+		scrollTo(offsetToShow(index, measured.scrollTop, measured.height, 22));
+	};
+	const applyReveal = () => {
+		const id = props.revealId ?? null;
+		if (id === null) {
+			revealed = null;
+			return;
+		}
+		if (!mounted || id === revealed) return;
+		const index = indexOf(id);
+		if (index === -1) return;
+		revealed = id;
+		scrollToIndex(index);
+	};
+	const handleScroll = () => {
+		const $root = root$1.value;
+		if (!$root || $root.scrollTop === measured.scrollTop) return;
+		measured.scrollTop = $root.scrollTop;
+		props.onScroll?.(measured.scrollTop);
+		syncRange();
+	};
+	const handleKeydown = (event) => {
+		if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey || !TREE_KEYS.has(event.key)) return;
+		event.preventDefault();
+		const { rows, activeId } = props;
+		if (event.key === "Enter" || event.key === " ") {
+			const index = indexOf(activeId);
+			if (index !== -1) props.onActivate?.(rows[index]);
+			return;
+		}
+		const move = moveFocus(rows, activeId, event.key, props.dir);
+		if (!move) return;
+		if (move.type === "toggle") {
+			props.onToggle?.(move.id, move.expanded);
+			return;
+		}
+		scrollToIndex(move.index);
+		props.onActiveChange?.(move.id);
+	};
+	const handleBlur = () => {
+		leftWithWindow = !document.hasFocus();
+	};
+	const handleFocus = () => {
+		const skipScroll = leftWithWindow;
+		leftWithWindow = false;
+		const { rows, activeId, currentId } = props;
+		if (!rows.length || !root$1.value?.matches(":focus-visible")) return;
+		const active = indexOf(activeId);
+		if (active !== -1) {
+			if (!skipScroll) scrollToIndex(active);
+			return;
+		}
+		const current = indexOf(currentId);
+		const index = current !== -1 ? current : Math.min(rows.length - 1, Math.ceil(measured.scrollTop / 22));
+		scrollToIndex(index);
+		props.onActiveChange?.(rows[index].node.id);
+	};
+	const handleRowClick = (row) => {
+		props.onActiveChange?.(row.node.id);
+		props.onActivate?.(row);
+	};
+	const handleTwistyClick = (event, row) => {
+		event.stopPropagation();
+		props.onActiveChange?.(row.node.id);
+		props.onToggle?.(row.node.id, !row.expanded);
+	};
+	onMounted(() => {
+		const $root = root$1.value;
+		mounted = true;
+		measured.height = $root.clientHeight;
+		scrollTo(props.getScrollTop());
+		applyReveal();
+		const resizeObserver = new ResizeObserver(() => {
+			if ($root.clientHeight === measured.height) return;
+			measured.height = $root.clientHeight;
+			syncRange();
+		});
+		resizeObserver.observe($root);
+		addUnsubscribe(() => resizeObserver.disconnect());
+	});
+	onUpdated(applyReveal);
+	const renderItem = (row$1, index) => {
+		const { node } = row$1;
+		const current = node.id === props.currentId;
+		return html`<div class=${[
+			"tree-row",
+			row,
+			{
+				active: node.id === props.activeId,
+				current
+			}
+		]} id=${domId(node.id)} role="treeitem" aria-level=${row$1.level} aria-setsize=${row$1.setSize} aria-posinset=${row$1.posInSet} .ariaExpanded=${node.hasChildren ? String(row$1.expanded) : null} .ariaCurrent=${current ? "true" : null} style=${{
+			height: `22px`,
+			transform: `translateY(${index * 22}px)`,
+			"padding-inline-start": `${(row$1.level - 1) * TREE_INDENT}px`
+		}} @click=${() => handleRowClick(row$1)}>${node.hasChildren ? html`<span class=${[
+			"tree-twisty",
+			twisty,
+			{ collapsed: !row$1.expanded }
+		]} @click=${(event) => handleTwistyClick(event, row$1)}><${Icon} .name=${row$1.expanded ? "chevron-down" : "chevron-right"} .size=${16} /></span>` : html`<span class=${twisty}></span>`}${props.renderRow(row$1)}</div>`;
+	};
+	return () => {
+		const { rows, activeId } = props;
+		view.first;
+		view.last;
+		props.revealId;
+		const { first, last } = rangeNow();
+		const active = indexOf(activeId);
+		const indexes = [];
+		for (let index = first; index <= last; index++) indexes.push(index);
+		if (active !== -1 && (active < first || active > last)) {
+			indexes.push(active);
+			indexes.sort((a, b) => a - b);
+		}
+		return html`<div class=${[
+			"tree",
+			"scrollbar",
+			root
+		]} ${ref(root$1)} role="tree" tabindex=${rows.length ? 0 : -1} .dir=${props.dir ?? ""} aria-label=${props.label} aria-activedescendant=${active === -1 ? "" : domId(rows[active].node.id)} @keydown=${handleKeydown} @focus=${handleFocus} @blur=${handleBlur} @scroll=${handleScroll}><div class=${space} style=${{ height: `${rows.length * 22}px` }}>${repeat(indexes, (index) => rows[index].node.id, (index) => renderItem(rows[index], index))}</div></div>`;
+	};
+};
+//#endregion
+export { Tree as default };

package/dist/components/primitives/tree/Tree.styles.js

@@ -0,0 +1,71 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/tree/Tree.styles.ts
+var root = css`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none;
+  background-color: var(--tree-background);
+  color: var(--foreground);
+  font-size: 13px;
+  user-select: none;
+`;
+var space = css`
+  position: relative;
+  width: 100%;
+`;
+var row = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover,
+  .tree:focus &.active:not(.current) {
+    background-color: var(--tree-row-hover);
+    color: var(--active);
+  }
+
+  &.current {
+    background-color: var(--tree-row-current);
+  }
+
+  @media (forced-colors: active) {
+    &.current {
+      outline: 1px dashed CanvasText;
+      outline-offset: -1px;
+    }
+
+    .tree:focus &.active {
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+    }
+
+    .tree:focus &.active.current {
+      outline: 1px dashed Highlight;
+      outline-offset: -1px;
+    }
+  }
+`;
+var twisty = css`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--tree-muted);
+
+  .tree[dir='rtl'] &.collapsed {
+    transform: scaleX(-1);
+  }
+`;
+//#endregion
+export { root, row, space, twisty };