@refrakt-md/editor 0.6.0

package/app/src/lib/components/RegionCard.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { ParsedRegion } from '../utils/layout-parser.js';
+	import { containsNav } from '../utils/layout-parser.js';
+	import NavEditor from './NavEditor.svelte';
+
+	interface Props {
+		region: ParsedRegion;
+		onchange: (region: ParsedRegion) => void;
+		ondelete: () => void;
+	}
+
+	let { region, onchange, ondelete }: Props = $props();
+
+	let showNavEditor = $state(false);
+	let hasNav = $derived(containsNav(region.content));
+
+	function handleNameChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		onchange({ ...region, name: input.value });
+	}
+
+	function handleModeChange(mode: ParsedRegion['mode']) {
+		onchange({ ...region, mode });
+	}
+
+	function handleContentChange(e: Event) {
+		const textarea = e.target as HTMLTextAreaElement;
+		onchange({ ...region, content: textarea.value });
+	}
+
+	function handleNavChange(newContent: string) {
+		onchange({ ...region, content: newContent });
+	}
+
+	function handleDeleteClick() {
+		if (region.content.trim()) {
+			if (!confirm(`Delete region "${region.name}"? Its content will be lost.`)) return;
+		}
+		ondelete();
+	}
+
+	// Auto-resize textarea
+	function autoResize(textarea: HTMLTextAreaElement) {
+		textarea.style.height = 'auto';
+		textarea.style.height = `${textarea.scrollHeight}px`;
+	}
+
+	function handleTextareaInput(e: Event) {
+		const textarea = e.target as HTMLTextAreaElement;
+		autoResize(textarea);
+		handleContentChange(e);
+	}
+</script>
+
+<div class="region-card">
+	<div class="region-card__header">
+		<div class="region-card__name-row">
+			<input
+				class="region-card__name"
+				type="text"
+				value={region.name}
+				oninput={handleNameChange}
+				placeholder="Region name"
+			/>
+			<div class="region-card__mode">
+				{#each ['replace', 'prepend', 'append'] as mode}
+					<button
+						class="region-card__mode-btn"
+						class:active={region.mode === mode}
+						onclick={() => handleModeChange(mode as ParsedRegion['mode'])}
+					>
+						{mode}
+					</button>
+				{/each}
+			</div>
+		</div>
+		<div class="region-card__actions">
+			{#if hasNav}
+				<button
+					class="region-card__toggle-btn"
+					class:active={showNavEditor}
+					onclick={() => { showNavEditor = !showNavEditor; }}
+				>
+					{showNavEditor ? 'Text' : 'Visual'}
+				</button>
+			{/if}
+			<button
+				class="region-card__delete-btn"
+				onclick={handleDeleteClick}
+				title="Delete region"
+			>
+				<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+					<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	<div class="region-card__body">
+		{#if hasNav && showNavEditor}
+			<NavEditor content={region.content} onchange={handleNavChange} />
+		{:else}
+			<textarea
+				class="region-card__textarea"
+				value={region.content}
+				oninput={handleTextareaInput}
+				placeholder="Region content..."
+				rows="4"
+				use:autoResize
+			></textarea>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.region-card {
+		background: transparent;
+	}
+
+	.region-card__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--ed-space-2) 0;
+		background: transparent;
+		border-bottom: 1px solid var(--ed-border-default);
+		gap: var(--ed-space-2);
+	}
+
+	.region-card__name-row {
+		display: flex;
+		align-items: center;
+		gap: var(--ed-space-3);
+		flex: 1;
+		min-width: 0;
+	}
+
+	.region-card__name {
+		font-size: var(--ed-text-base);
+		font-weight: 600;
+		color: var(--ed-text-primary);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		padding: var(--ed-space-2) var(--ed-space-3);
+		background: var(--ed-surface-0);
+		outline: none;
+		min-width: 80px;
+		max-width: 160px;
+		transition: border-color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
+	}
+
+	.region-card__name:focus {
+		border-color: var(--ed-accent);
+		box-shadow: 0 0 0 3px var(--ed-accent-ring);
+	}
+
+	.region-card__mode {
+		display: inline-flex;
+		background: var(--ed-surface-2);
+		border-radius: var(--ed-radius-md);
+		padding: 2px;
+		gap: 2px;
+		flex-shrink: 0;
+	}
+
+	.region-card__mode-btn {
+		font-size: var(--ed-text-xs);
+		padding: var(--ed-space-1) var(--ed-space-2);
+		border: none;
+		border-radius: calc(var(--ed-radius-md) - 2px);
+		background: transparent;
+		color: var(--ed-text-tertiary);
+		cursor: pointer;
+		text-transform: capitalize;
+		font-weight: 500;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
+	}
+
+	.region-card__mode-btn:hover:not(.active) {
+		color: var(--ed-text-secondary);
+	}
+
+	.region-card__mode-btn.active {
+		background: var(--ed-surface-0);
+		color: var(--ed-text-primary);
+		box-shadow: var(--ed-shadow-sm);
+	}
+
+	.region-card__actions {
+		display: flex;
+		align-items: center;
+		gap: var(--ed-space-1);
+		flex-shrink: 0;
+	}
+
+	.region-card__toggle-btn {
+		font-size: var(--ed-text-xs);
+		padding: 0.15rem var(--ed-space-2);
+		border: none;
+		border-radius: calc(var(--ed-radius-md) - 2px);
+		background: transparent;
+		color: var(--ed-text-tertiary);
+		cursor: pointer;
+		font-weight: 500;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
+	}
+
+	.region-card__toggle-btn:hover:not(.active) {
+		color: var(--ed-text-secondary);
+	}
+
+	.region-card__toggle-btn.active {
+		background: var(--ed-surface-0);
+		color: var(--ed-text-primary);
+		box-shadow: var(--ed-shadow-sm);
+	}
+
+	.region-card__delete-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
+		border: none;
+		background: transparent;
+		color: var(--ed-text-muted);
+		cursor: pointer;
+		border-radius: var(--ed-radius-sm);
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast);
+	}
+
+	.region-card__delete-btn:hover {
+		background: var(--ed-danger-subtle);
+		color: var(--ed-danger);
+	}
+
+	.region-card__body {
+		padding: 0;
+	}
+
+	.region-card__textarea {
+		width: 100%;
+		min-height: 80px;
+		padding: var(--ed-space-3);
+		border: none;
+		outline: none;
+		resize: none;
+		font-family: var(--ed-font-mono);
+		font-size: var(--ed-text-base);
+		line-height: 1.5;
+		color: var(--ed-text-primary);
+		background: transparent;
+	}
+
+	.region-card__textarea::placeholder {
+		color: var(--ed-text-muted);
+	}
+</style>

package/app/src/lib/components/RenameDialog.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	interface Props {
+		currentName: string;
+		onrename: (newName: string) => void;
+		onclose: () => void;
+	}
+
+	let { currentName, onrename, onclose }: Props = $props();
+
+	let newName = $state(currentName);
+	let dialogEl: HTMLDialogElement;
+
+	$effect(() => {
+		if (dialogEl && !dialogEl.open) {
+			dialogEl.showModal();
+		}
+	});
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		const trimmed = newName.trim();
+		if (trimmed && trimmed !== currentName) {
+			onrename(trimmed);
+		}
+	}
+</script>
+
+<dialog bind:this={dialogEl} class="dialog" onclose={onclose}>
+	<form class="dialog__form" onsubmit={handleSubmit}>
+		<h2 class="dialog__title">Rename</h2>
+		<input
+			class="dialog__input"
+			type="text"
+			bind:value={newName}
+			autofocus
+			onkeydown={(e) => { if (e.key === 'Escape') onclose(); }}
+		/>
+		<div class="dialog__actions">
+			<button type="button" class="dialog__btn dialog__btn--cancel" onclick={onclose}>Cancel</button>
+			<button
+				type="submit"
+				class="dialog__btn dialog__btn--primary"
+				disabled={!newName.trim() || newName.trim() === currentName}
+			>Rename</button>
+		</div>
+	</form>
+</dialog>
+
+<style>
+	.dialog {
+		border: none;
+		border-radius: var(--ed-radius-lg);
+		padding: 0;
+		box-shadow: var(--ed-shadow-xl);
+		max-width: 340px;
+		width: 90vw;
+	}
+
+	.dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+		backdrop-filter: blur(4px);
+	}
+
+	.dialog[open] {
+		animation: dialog-enter 180ms ease-out;
+	}
+
+	@keyframes dialog-enter {
+		from { opacity: 0; transform: translateY(8px) scale(0.98); }
+		to { opacity: 1; transform: translateY(0) scale(1); }
+	}
+
+	.dialog__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ed-space-3);
+		padding: var(--ed-space-5);
+	}
+
+	.dialog__title {
+		font-size: var(--ed-text-lg);
+		font-weight: 600;
+		color: var(--ed-text-primary);
+		margin: 0;
+	}
+
+	.dialog__input {
+		padding: var(--ed-space-2) var(--ed-space-3);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		font-size: var(--ed-text-md);
+		color: var(--ed-text-primary);
+		background: var(--ed-surface-0);
+		outline: none;
+	}
+
+	.dialog__input:focus {
+		border-color: var(--ed-accent);
+		box-shadow: 0 0 0 2px var(--ed-accent-ring);
+	}
+
+	.dialog__actions {
+		display: flex;
+		gap: var(--ed-space-2);
+		justify-content: flex-end;
+	}
+
+	.dialog__btn {
+		padding: var(--ed-space-2) var(--ed-space-3);
+		border-radius: var(--ed-radius-sm);
+		font-size: var(--ed-text-sm);
+		cursor: pointer;
+		border: 1px solid var(--ed-border-default);
+		transition: background var(--ed-transition-fast);
+	}
+
+	.dialog__btn--cancel {
+		background: var(--ed-surface-0);
+		color: var(--ed-text-tertiary);
+	}
+
+	.dialog__btn--cancel:hover {
+		background: var(--ed-surface-2);
+	}
+
+	.dialog__btn--primary {
+		padding: var(--ed-space-2) var(--ed-space-4);
+		background: var(--ed-accent);
+		color: #ffffff;
+		border-color: var(--ed-accent);
+		font-weight: 500;
+		box-shadow: var(--ed-shadow-sm);
+	}
+
+	.dialog__btn--primary:hover:not(:disabled) {
+		background: var(--ed-accent-hover);
+	}
+
+	.dialog__btn--primary:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+</style>

package/app/src/lib/components/ResizeHandle.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	interface Props {
+		onresize: (deltaX: number) => void;
+	}
+
+	let { onresize }: Props = $props();
+
+	let dragging = $state(false);
+	let startX = 0;
+
+	function handlePointerDown(e: PointerEvent) {
+		dragging = true;
+		startX = e.clientX;
+		document.body.style.cursor = 'col-resize';
+		document.body.style.userSelect = 'none';
+
+		const target = e.currentTarget as HTMLElement;
+		target.setPointerCapture(e.pointerId);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (!dragging) return;
+		const delta = e.clientX - startX;
+		startX = e.clientX;
+		onresize(delta);
+	}
+
+	function handlePointerUp() {
+		dragging = false;
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+	}
+</script>
+
+<div
+	class="resize-handle"
+	class:active={dragging}
+	onpointerdown={handlePointerDown}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+	role="separator"
+	aria-orientation="vertical"
+>
+	<div class="resize-handle__grip">
+		<span class="resize-handle__dot"></span>
+		<span class="resize-handle__dot"></span>
+		<span class="resize-handle__dot"></span>
+	</div>
+</div>
+
+<style>
+	.resize-handle {
+		width: 8px;
+		cursor: col-resize;
+		background: transparent;
+		transition: background var(--ed-transition-fast), width var(--ed-transition-fast);
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
+
+	.resize-handle__grip {
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		opacity: 0;
+		transition: opacity var(--ed-transition-fast);
+	}
+
+	.resize-handle:hover .resize-handle__grip {
+		opacity: 1;
+	}
+
+	.resize-handle__dot {
+		width: 3px;
+		height: 3px;
+		border-radius: 50%;
+		background: var(--ed-text-muted);
+	}
+
+	.resize-handle:hover {
+		background: var(--ed-accent-subtle);
+		width: 10px;
+	}
+
+	.resize-handle.active {
+		background: color-mix(in srgb, var(--ed-accent) 20%, transparent);
+		width: 10px;
+	}
+
+	.resize-handle.active .resize-handle__grip {
+		opacity: 1;
+	}
+
+	.resize-handle.active .resize-handle__dot {
+		background: var(--ed-accent);
+	}
+</style>

package/app/src/lib/components/RuneAttributes.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import type { RuneInfo, RuneAttributeInfo } from '../api/client.js';
+
+	interface Props {
+		runeInfo: RuneInfo;
+		attributes: Record<string, string>;
+		onchange: (attrs: Record<string, string>) => void;
+	}
+
+	let { runeInfo, attributes, onchange }: Props = $props();
+
+	function updateAttr(name: string, value: string) {
+		const next = { ...attributes };
+		if (value === '' || value === undefined) {
+			delete next[name];
+		} else {
+			next[name] = value;
+		}
+		onchange(next);
+	}
+
+	/** All schema attributes, sorted with required first */
+	let sortedAttrs = $derived(
+		Object.entries(runeInfo.attributes)
+			.sort(([, a], [, b]) => (a.required === b.required ? 0 : a.required ? -1 : 1))
+	);
+</script>
+
+<div class="rune-attrs">
+	{#each sortedAttrs as [name, info] (name)}
+		{@const value = attributes[name] ?? ''}
+		<label class="rune-attr">
+			<span class="rune-attr__label">
+				{name}
+				{#if info.required}
+					<span class="rune-attr__required">*</span>
+				{/if}
+			</span>
+
+			{#if info.type === 'Boolean'}
+				<div class="rune-attr__toggle-row">
+					<button
+						class="rune-attr__toggle"
+						class:active={value === 'true'}
+						onclick={() => updateAttr(name, value === 'true' ? '' : 'true')}
+						type="button"
+					>
+						<span class="rune-attr__toggle-knob"></span>
+					</button>
+					<span class="rune-attr__toggle-label">{value === 'true' ? 'Yes' : 'No'}</span>
+				</div>
+			{:else if info.values && info.values.length > 0}
+				<select
+					class="rune-attr__select"
+					value={value}
+					onchange={(e) => updateAttr(name, (e.target as HTMLSelectElement).value)}
+				>
+					{#if !info.required}
+						<option value="">-- none --</option>
+					{/if}
+					{#each info.values as opt}
+						<option value={opt}>{opt}</option>
+					{/each}
+				</select>
+			{:else if info.type === 'Number'}
+				<input
+					class="rune-attr__input"
+					type="number"
+					value={value}
+					oninput={(e) => updateAttr(name, (e.target as HTMLInputElement).value)}
+					placeholder={info.required ? 'required' : ''}
+				/>
+			{:else}
+				<input
+					class="rune-attr__input"
+					type="text"
+					value={value}
+					oninput={(e) => updateAttr(name, (e.target as HTMLInputElement).value)}
+					placeholder={info.required ? 'required' : ''}
+				/>
+			{/if}
+		</label>
+	{/each}
+
+	{#if sortedAttrs.length === 0}
+		<span class="rune-attrs__empty">No attributes</span>
+	{/if}
+</div>
+
+<style>
+	.rune-attrs {
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+	}
+
+	.rune-attr {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ed-space-1);
+	}
+
+	.rune-attr__label {
+		font-size: var(--ed-text-xs);
+		font-weight: 600;
+		color: var(--ed-text-tertiary);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+	}
+
+	.rune-attr__required {
+		color: var(--ed-danger);
+	}
+
+	.rune-attr__input {
+		padding: var(--ed-space-2) var(--ed-space-3);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		font-size: var(--ed-text-base);
+		color: var(--ed-text-primary);
+		background: var(--ed-surface-0);
+		outline: none;
+		font-family: inherit;
+	}
+
+	.rune-attr__input:focus {
+		border-color: var(--ed-accent);
+		box-shadow: 0 0 0 2px var(--ed-accent-ring);
+	}
+
+	.rune-attr__select {
+		padding: var(--ed-space-2) var(--ed-space-3);
+		border: 1px solid var(--ed-border-default);
+		border-radius: var(--ed-radius-sm);
+		font-size: var(--ed-text-base);
+		color: var(--ed-text-primary);
+		background: var(--ed-surface-0);
+		outline: none;
+		font-family: inherit;
+		cursor: pointer;
+	}
+
+	.rune-attr__select:focus {
+		border-color: var(--ed-accent);
+		box-shadow: 0 0 0 2px var(--ed-accent-ring);
+	}
+
+	/* Toggle switch */
+	.rune-attr__toggle-row {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+	}
+
+	.rune-attr__toggle {
+		position: relative;
+		width: 32px;
+		height: 18px;
+		border-radius: 9px;
+		border: 1px solid var(--ed-border-strong);
+		background: var(--ed-surface-3);
+		cursor: pointer;
+		transition: background var(--ed-transition-fast), border-color var(--ed-transition-fast);
+		padding: 0;
+	}
+
+	.rune-attr__toggle.active {
+		background: var(--ed-accent);
+		border-color: var(--ed-accent);
+	}
+
+	.rune-attr__toggle-knob {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: var(--ed-surface-0);
+		transition: transform var(--ed-transition-fast);
+	}
+
+	.rune-attr__toggle.active .rune-attr__toggle-knob {
+		transform: translateX(14px);
+	}
+
+	.rune-attr__toggle-label {
+		font-size: var(--ed-text-sm);
+		color: var(--ed-text-tertiary);
+	}
+
+	.rune-attrs__empty {
+		font-size: var(--ed-text-sm);
+		color: var(--ed-text-muted);
+		font-style: italic;
+	}
+</style>