@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Dropdown.svelte

@@ -0,0 +1,183 @@
+<script module lang="ts">
+	/** What .dropdown is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    `.dropdown-open` and `.dropdown-fixed` are PARTS: the wrapper writes
+	    them from its own state, nobody opts into them. */
+	export const PREFIX = 'dropdown';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Which side of the trigger the box opens on. Below by default. */
+		side: ['top', 'bottom', 'left', 'right'],
+		/* Where the box lines up along that side. The start by default. */
+		align: ['center', 'end']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['content', 'open', 'fixed'] as const;
+
+	/** What the trigger snippet receives: spread `props` on your button. */
+	export interface DropdownTrigger {
+		open: boolean;
+		toggle: () => void;
+		props: {
+			'aria-expanded': boolean;
+			'aria-controls': string;
+			'aria-haspopup': 'true';
+			onclick: () => void;
+		};
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * A trigger and a box that floats next to it. The box is placed in fixed
+	 * coordinates, so no ancestor's `overflow` crops it, and it flips to the
+	 * other side when there is no room. It closes on Escape and on a press
+	 * outside — not on a click inside, which is the content's to decide
+	 * (`close` is handed to it).
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { fly } from 'svelte/transition';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		/** Whether the box is shown. Bindable. */
+		open?: boolean;
+		/** The element that opens it. Spread `props` on it. */
+		trigger: Snippet<[DropdownTrigger]>;
+		/** The box's content. `close` closes it. */
+		children?: Snippet<[{ close: () => void }]>;
+		/** Animate the box. Ignored when the visitor asks for reduced motion. */
+		animated?: boolean;
+		/** Called after every change of `open`. */
+		onToggle?: (open: boolean) => void;
+		class?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		trigger,
+		children,
+		animated = true,
+		onToggle,
+		side,
+		align,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	// `side` and `align` are destructured because the placement reads them;
+	// they are handed back to applyAxes so they still write their classes.
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, { ...axes, side, align }));
+	let classes = $derived(cx(PREFIX, applied.classes, `${PREFIX}-fixed`, open && `${PREFIX}-open`, klass));
+
+	const uid = $props.id();
+
+	let root: HTMLDivElement | undefined = $state();
+	let content: HTMLDivElement | undefined = $state();
+	let coords = $state('');
+
+	function set(value: boolean) {
+		if (value === open) return;
+		open = value;
+		onToggle?.(value);
+	}
+	const toggle = () => set(!open);
+	const close = () => set(false);
+
+	/** Fixed coordinates for the box, flipped when the asked side has no room. */
+	function place() {
+		if (!root || !content) return;
+		const t = (root.firstElementChild ?? root).getBoundingClientRect();
+		const b = content.getBoundingClientRect();
+		const gap = parseFloat(getComputedStyle(root).getPropertyValue('--dropdown-gap')) || 4;
+		const vw = document.documentElement.clientWidth;
+		const vh = document.documentElement.clientHeight;
+		const rtl = getComputedStyle(root).direction === 'rtl';
+
+		let top: number;
+		let left: number;
+		if (side === 'left' || side === 'right') {
+			const fitsRight = vw - t.right >= b.width + gap;
+			const fitsLeft = t.left >= b.width + gap;
+			const toRight = side === 'right' ? fitsRight || !fitsLeft : !fitsLeft && fitsRight;
+			left = toRight ? t.right + gap : t.left - gap - b.width;
+			top = align === 'end' ? t.bottom - b.height : align === 'center' ? t.top + (t.height - b.height) / 2 : t.top;
+		} else {
+			const below = vh - t.bottom;
+			const above = t.top;
+			const wantUp = side === 'top';
+			const up = wantUp ? above >= b.height + gap || above > below : below < b.height + gap && above > below;
+			top = up ? t.top - gap - b.height : t.bottom + gap;
+			const start = rtl ? t.right - b.width : t.left;
+			const end = rtl ? t.left : t.right - b.width;
+			left = align === 'end' ? end : align === 'center' ? t.left + (t.width - b.width) / 2 : start;
+		}
+		/* Kept inside the viewport, a little off its edges. */
+		left = Math.min(Math.max(4, left), Math.max(4, vw - b.width - 4));
+		top = Math.min(Math.max(4, top), Math.max(4, vh - b.height - 4));
+		coords = `top:${Math.round(top)}px;left:${Math.round(left)}px;`;
+	}
+
+	/* While open: placed now, and again on every scroll or resize. Closed by
+	   Escape and by a press outside the dropdown. */
+	$effect(() => {
+		if (!open || !content) return;
+		place();
+		const reposition = () => place();
+		const outside = (e: PointerEvent) => {
+			if (root && !root.contains(e.target as Node)) close();
+		};
+		const escape = (e: KeyboardEvent) => {
+			if (e.key !== 'Escape') return;
+			/* Focus inside: back to the trigger, which the box belonged to. */
+			const inside = root?.contains(document.activeElement);
+			close();
+			if (inside) root?.querySelector<HTMLElement>('[aria-controls]')?.focus();
+		};
+		const observer = new ResizeObserver(reposition);
+		observer.observe(content);
+		window.addEventListener('scroll', reposition, true);
+		window.addEventListener('resize', reposition);
+		document.addEventListener('pointerdown', outside, true);
+		document.addEventListener('keydown', escape);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener('scroll', reposition, true);
+			window.removeEventListener('resize', reposition);
+			document.removeEventListener('pointerdown', outside, true);
+			document.removeEventListener('keydown', escape);
+		};
+	});
+
+	const reduced = () =>
+		typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	let duration = $derived(animated && !reduced() ? 120 : 0);
+</script>
+
+<div {...applied.rest} bind:this={root} class={classes}>
+	{@render trigger({
+		open,
+		toggle,
+		props: {
+			'aria-expanded': open,
+			'aria-controls': `${uid}-content`,
+			'aria-haspopup': 'true',
+			onclick: toggle
+		}
+	})}
+	{#if open}
+		<div
+			bind:this={content}
+			id={`${uid}-content`}
+			class={`${PREFIX}-content`}
+			style={coords}
+			transition:fly={{ y: side === 'top' ? 4 : -4, duration }}
+		>
+			{@render children?.({ close })}
+		</div>
+	{/if}
+</div>

package/dist/components/Dropdown.svelte.d.ts

@@ -0,0 +1,52 @@
+/** What .dropdown is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    `.dropdown-open` and `.dropdown-fixed` are PARTS: the wrapper writes
+    them from its own state, nobody opts into them. */
+export declare const PREFIX = "dropdown";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly side: readonly ["top", "bottom", "left", "right"];
+    readonly align: readonly ["center", "end"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["content", "open", "fixed"];
+/** What the trigger snippet receives: spread `props` on your button. */
+export interface DropdownTrigger {
+    open: boolean;
+    toggle: () => void;
+    props: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-haspopup': 'true';
+        onclick: () => void;
+    };
+}
+/**
+     * A trigger and a box that floats next to it. The box is placed in fixed
+     * coordinates, so no ancestor's `overflow` crops it, and it flips to the
+     * other side when there is no room. It closes on Escape and on a press
+     * outside — not on a click inside, which is the content's to decide
+     * (`close` is handed to it).
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Whether the box is shown. Bindable. */
+    open?: boolean;
+    /** The element that opens it. Spread `props` on it. */
+    trigger: Snippet<[DropdownTrigger]>;
+    /** The box's content. `close` closes it. */
+    children?: Snippet<[{
+        close: () => void;
+    }]>;
+    /** Animate the box. Ignored when the visitor asks for reduced motion. */
+    animated?: boolean;
+    /** Called after every change of `open`. */
+    onToggle?: (open: boolean) => void;
+    class?: string;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/Editable.svelte

@@ -0,0 +1,292 @@
+<script module lang="ts">
+	/** What .editable is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    The editable draws the value at rest and the frame around its editor:
+	    `.editable-display`, `.editable-empty` and `.editable-form` are PARTS.
+	    The editor itself is another component (Input, NumberInput…). */
+	export const PREFIX = 'editable';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['display', 'empty', 'form', 'list'] as const;
+
+	/** The editors the component draws by itself, by the shape of the value. */
+	/** What opens the editor at rest, by itself. Enter covers Space too. */
+	export type EditableTrigger = 'click' | 'enter' | 'f2';
+
+	export type EditableKind = 'text' | 'number' | 'boolean' | 'text[]' | 'number[]' | 'boolean[]';
+
+	/** What the `edit` snippet is handed. */
+	export interface EditableControl<V> {
+		/** The value being edited — not yet the component's. */
+		readonly value: V;
+		/** Change the value being edited. */
+		set: (value: V) => void;
+		/** Keep the edit: `onChange` is called if the value changed. */
+		commit: () => void;
+		/** Drop the edit. */
+		cancel: () => void;
+	}
+</script>
+
+<script lang="ts" generics="V">
+	/**
+	 * A value shown as it is, that turns into its editor when asked.
+	 *
+	 * At rest the value is drawn by `display` — or as text — inside a button:
+	 * a click, Enter or F2 opens the editor. The editor is the `edit` snippet,
+	 * handed an `EditableControl`; or, for a plain value, the one `kind` names
+	 * (`text`, `number`, `boolean` and their lists). Enter keeps the edit
+	 * (Ctrl + Enter in a multi-line field), Escape drops it, and leaving the
+	 * editor keeps it. `onChange` is only called when the value changed.
+	 *
+	 * Each of those is a default, not a rule. `editing` is bindable: read it,
+	 * or set it to open and close the editor from anywhere — a pencil button,
+	 * a row's "Edit", a whole form switching mode. `openOn` picks which of
+	 * click, Enter and F2 still open it by themselves (none: the value at rest
+	 * is plain text, not a button), and `commitOnBlur` whether leaving the
+	 * editor keeps the edit. Closing — by `editing = false` or `commit()` —
+	 * keeps the edit; only Escape and `cancel()` drop it.
+	 *
+	 * The component keeps no value of its own: `value` is what is shown, and
+	 * it is the owner's to update in `onChange` — a DataHandler row, a form.
+	 */
+	import { tick, untrack, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+	import Input from './Input.svelte';
+	import NumberInput from './NumberInput.svelte';
+	import Toggle from './Toggle.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import ChipsInput from './ChipsInput.svelte';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+		/** What is shown, and what an edit starts from. */
+		value: V;
+		/** After an edit that changed the value. */
+		onChange?: (value: V) => void;
+		/** The editor drawn when there is no `edit` snippet. Default `text`. */
+		kind?: EditableKind;
+		/** How the value is drawn at rest. Default: as text. */
+		display?: Snippet<[V]>;
+		/** The editor. Default: the one `kind` names. */
+		edit?: Snippet<[EditableControl<V>]>;
+		/** Shown at rest when the value is empty. */
+		placeholder?: string;
+		/** Never opens the editor. */
+		disabled?: boolean;
+		/** Whether the editor is open. Bindable: set it to open or close it from outside. */
+		editing?: boolean;
+		/** What opens the editor by itself. Default all three; `[]` leaves it to `editing` alone. */
+		openOn?: EditableTrigger[];
+		/** Leaving the editor keeps the edit. Default yes; without, the editor stays open until closed. */
+		commitOnBlur?: boolean;
+		/** Said after the value by a screen reader, on the button that opens the editor. Default `Edit`. */
+		editLabel?: string;
+		/** The text of a boolean at rest. */
+		trueLabel?: string;
+		falseLabel?: string;
+		class?: string;
+	}
+
+	let {
+		value,
+		onChange,
+		kind = 'text',
+		display,
+		edit,
+		placeholder = '—',
+		disabled = false,
+		editing = $bindable(false),
+		openOn = ['click', 'enter', 'f2'],
+		commitOnBlur = true,
+		editLabel = 'Edit',
+		trueLabel = 'Yes',
+		falseLabel = 'No',
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let draft = $state<V>() as V;
+	let form = $state<HTMLElement>();
+	let button = $state<HTMLButtonElement>();
+
+	const same = (a: unknown, b: unknown) => a === b || JSON.stringify(a) === JSON.stringify(b);
+	const copy = (v: V): V => (Array.isArray(v) ? ([...v] as V) : v);
+
+	/* Every way in or out — a trigger, a method, `editing` set from outside —
+	   goes through `editing`; what opening and closing do is here, once.
+	   Opening starts a draft from the value; closing hands the draft on if it
+	   changed (cancel has put the value back in it first). The focus goes
+	   back to the value only if it was lost with the editor: not when it
+	   left for something else. */
+	let was = false;
+	$effect(() => {
+		const now = editing;
+		untrack(() => {
+			if (now === was) return;
+			was = now;
+			if (now) {
+				draft = copy(value);
+				tick().then(focusEditor);
+			} else {
+				if (!same(draft, value)) onChange?.(draft);
+				tick().then(() => {
+					if (document.activeElement === document.body) button?.focus();
+				});
+			}
+		});
+	});
+
+	function focusEditor() {
+		/* A field before anything else: a NumberInput with controls starts with a button. */
+		const first =
+			form?.querySelector<HTMLElement>('input:not([type=hidden], [type=checkbox], [type=radio]), textarea, select') ??
+			form?.querySelector<HTMLElement>('input, button, [tabindex]');
+		first?.focus();
+	}
+
+	/** Open the editor on the current value. */
+	export function open() {
+		if (!disabled) editing = true;
+	}
+
+	/** Keep the edit. */
+	export function commit() {
+		/* Already closed: the editor leaving the page fires a last focusout. */
+		if (!editing) return;
+		editing = false;
+	}
+
+	/** Drop the edit. */
+	export function cancel() {
+		if (!editing) return;
+		draft = copy(value);
+		editing = false;
+	}
+
+	/* At rest. Enter and Space would click a button by themselves: they are
+	   taken here, so that `openOn` can tell a key from a click. */
+	let opens = $derived(new Set(openOn));
+	function onDisplayKey(e: KeyboardEvent) {
+		const key = e.key === 'F2' ? 'f2' : e.key === 'Enter' || e.key === ' ' ? 'enter' : null;
+		if (!key) return;
+		e.preventDefault();
+		if (opens.has(key)) open();
+	}
+
+	const control: EditableControl<V> = {
+		get value() {
+			return draft;
+		},
+		set: (v) => (draft = v),
+		commit,
+		cancel
+	};
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			cancel();
+		} else if (e.key === 'Enter') {
+			const multiline = (e.target as HTMLElement).tagName === 'TEXTAREA';
+			if (multiline && !(e.ctrlKey || e.metaKey)) return;
+			e.preventDefault();
+			commit();
+		}
+	}
+
+	/* Leaving the editor keeps the edit — unless the focus only moved inside
+	   it (a chip's remove button, a stepper). Escape and Enter have already
+	   closed it by then. */
+	function onfocusout(e: FocusEvent) {
+		const to = e.relatedTarget as Node | null;
+		if (!commitOnBlur || (to && form?.contains(to))) return;
+		commit();
+	}
+
+	/* The keys and the focus come up from the editor inside: the group only
+	   listens, it is not a control — so the listeners are attached, not
+	   written as handlers on a non-interactive element. */
+	function listen(node: HTMLElement) {
+		node.addEventListener('keydown', onkeydown);
+		node.addEventListener('focusout', onfocusout);
+		return () => {
+			node.removeEventListener('keydown', onkeydown);
+			node.removeEventListener('focusout', onfocusout);
+		};
+	}
+
+	const isEmpty = (v: unknown) => v == null || v === '' || (Array.isArray(v) && v.length === 0);
+	const asText = (v: unknown): string =>
+		Array.isArray(v) ? v.map(asText).join(', ') : typeof v === 'boolean' ? (v ? trueLabel : falseLabel) : String(v);
+
+	/* The built-in editors work on the draft through these. */
+	const list = () => (Array.isArray(draft) ? (draft as unknown[]) : []);
+	function setAt(i: number, v: unknown) {
+		const next = [...list()];
+		next[i] = v;
+		draft = next as V;
+	}
+</script>
+
+<div {...applied.rest} class={classes}>
+	{#if editing}
+		<div class={`${PREFIX}-form`} bind:this={form} role="group" {@attach listen}>
+			{#if edit}
+				{@render edit(control)}
+			{:else if kind === 'number'}
+				<NumberInput value={draft as number | null} onValue={(v) => (draft = v as V)} />
+			{:else if kind === 'boolean'}
+				<Toggle checked={!!draft} onchange={(e) => (draft = e.currentTarget.checked as V)} />
+			{:else if kind === 'text[]' || kind === 'number[]'}
+				<ChipsInput
+					values={list().map(String)}
+					unique={false}
+					onChange={(vs) => (draft = (kind === 'number[]' ? vs.map(Number).filter((n) => !Number.isNaN(n)) : vs) as V)}
+				/>
+			{:else if kind === 'boolean[]'}
+				<span class={`${PREFIX}-list`}>
+					{#each list() as b, i (i)}
+						<Checkbox checked={!!b} onchange={(e) => setAt(i, e.currentTarget.checked)} />
+					{/each}
+				</span>
+			{:else}
+				<Input value={draft == null ? '' : String(draft)} oninput={(e) => (draft = e.currentTarget.value as V)} />
+			{/if}
+		</div>
+	{:else}
+		{#snippet shown()}
+			{#if isEmpty(value)}
+				<span class={`${PREFIX}-empty`}>{placeholder}</span>
+			{:else if display}
+				{@render display(value)}
+			{:else}
+				{asText(value)}
+			{/if}
+		{/snippet}
+		{#if opens.size}
+			<button
+				type="button"
+				class={`${PREFIX}-display`}
+				bind:this={button}
+				{disabled}
+				aria-label={`${isEmpty(value) ? placeholder : asText(value)}, ${editLabel}`}
+				onclick={() => opens.has('click') && open()}
+				onkeydown={onDisplayKey}
+			>
+				{@render shown()}
+			</button>
+		{:else}
+			<!-- Nothing here opens it: the value is text, not a control. -->
+			<span class={`${PREFIX}-display`}>{@render shown()}</span>
+		{/if}
+	{/if}
+</div>

package/dist/components/Editable.svelte.d.ts

@@ -0,0 +1,113 @@
+/** What .editable is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    The editable draws the value at rest and the frame around its editor:
+    `.editable-display`, `.editable-empty` and `.editable-form` are PARTS.
+    The editor itself is another component (Input, NumberInput…). */
+export declare const PREFIX = "editable";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["display", "empty", "form", "list"];
+/** The editors the component draws by itself, by the shape of the value. */
+/** What opens the editor at rest, by itself. Enter covers Space too. */
+export type EditableTrigger = 'click' | 'enter' | 'f2';
+export type EditableKind = 'text' | 'number' | 'boolean' | 'text[]' | 'number[]' | 'boolean[]';
+/** What the `edit` snippet is handed. */
+export interface EditableControl<V> {
+    /** The value being edited — not yet the component's. */
+    readonly value: V;
+    /** Change the value being edited. */
+    set: (value: V) => void;
+    /** Keep the edit: `onChange` is called if the value changed. */
+    commit: () => void;
+    /** Drop the edit. */
+    cancel: () => void;
+}
+/**
+     * A value shown as it is, that turns into its editor when asked.
+     *
+     * At rest the value is drawn by `display` — or as text — inside a button:
+     * a click, Enter or F2 opens the editor. The editor is the `edit` snippet,
+     * handed an `EditableControl`; or, for a plain value, the one `kind` names
+     * (`text`, `number`, `boolean` and their lists). Enter keeps the edit
+     * (Ctrl + Enter in a multi-line field), Escape drops it, and leaving the
+     * editor keeps it. `onChange` is only called when the value changed.
+     *
+     * Each of those is a default, not a rule. `editing` is bindable: read it,
+     * or set it to open and close the editor from anywhere — a pencil button,
+     * a row's "Edit", a whole form switching mode. `openOn` picks which of
+     * click, Enter and F2 still open it by themselves (none: the value at rest
+     * is plain text, not a button), and `commitOnBlur` whether leaving the
+     * editor keeps the edit. Closing — by `editing = false` or `commit()` —
+     * keeps the edit; only Escape and `cancel()` drop it.
+     *
+     * The component keeps no value of its own: `value` is what is shown, and
+     * it is the owner's to update in `onChange` — a DataHandler row, a form.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<V>(): {
+    props: {
+        readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    } & {} & {
+        background?: string;
+    } & Omit<HTMLAttributes<HTMLDivElement>, "onchange"> & {
+        /** What is shown, and what an edit starts from. */
+        value: V;
+        /** After an edit that changed the value. */
+        onChange?: (value: V) => void;
+        /** The editor drawn when there is no `edit` snippet. Default `text`. */
+        kind?: EditableKind;
+        /** How the value is drawn at rest. Default: as text. */
+        display?: Snippet<[V]>;
+        /** The editor. Default: the one `kind` names. */
+        edit?: Snippet<[EditableControl<V>]>;
+        /** Shown at rest when the value is empty. */
+        placeholder?: string;
+        /** Never opens the editor. */
+        disabled?: boolean;
+        /** Whether the editor is open. Bindable: set it to open or close it from outside. */
+        editing?: boolean;
+        /** What opens the editor by itself. Default all three; `[]` leaves it to `editing` alone. */
+        openOn?: EditableTrigger[];
+        /** Leaving the editor keeps the edit. Default yes; without, the editor stays open until closed. */
+        commitOnBlur?: boolean;
+        /** Said after the value by a screen reader, on the button that opens the editor. Default `Edit`. */
+        editLabel?: string;
+        /** The text of a boolean at rest. */
+        trueLabel?: string;
+        falseLabel?: string;
+        class?: string;
+    };
+    exports: {
+        open: () => void;
+        commit: () => void;
+        cancel: () => void;
+    };
+    bindings: "editing";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "editing";
+    exports(): {
+        open: () => void;
+        commit: () => void;
+        cancel: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Editable: $$IsomorphicComponent;
+type Editable<V> = InstanceType<typeof Editable<V>>;
+export default Editable;