@rokkit/chart 1.0.0-next.98 → 1.0.1

package/src/patterns/patterns.js

@@ -0,0 +1,360 @@
+/**
+ * Unified pattern library.
+ *
+ * Each entry is an array of mark descriptors.  All geometry is in normalized
+ * 0–1 coordinates; the renderer scales by `size` at paint time.
+ *
+ * Mark types
+ * ----------
+ * circle   { cx, cy, r }
+ * line     { x1, y1, x2, y2 }           coordinates may exceed 0–1 for seamless tiling
+ * polygon  { points: [x,y][] }
+ * rect     { x, y, w, h }
+ * path     { d: [cmd, ...args][] }       SVG path commands as nested arrays (H/V take one arg)
+ *
+ * Appearance
+ * ----------
+ * fill: true      → element uses fill color (stroke: none)
+ * fill: false     → element uses stroke color (fill: none)   ← default
+ * fillOpacity: n  → applied as fill-opacity on filled marks
+ * opacity: n      → applied as opacity on any mark
+ */
+
+/** @typedef {{ type: 'circle',  cx: number, cy: number, r: number,              fill?: boolean, fillOpacity?: number, opacity?: number }} CircleMark */
+/** @typedef {{ type: 'line',    x1: number, y1: number, x2: number, y2: number, fill?: false,   strokeWidth?: number }} LineMark */
+/** @typedef {{ type: 'polygon', points: [number,number][],                       fill?: boolean, fillOpacity?: number, opacity?: number }} PolygonMark */
+/** @typedef {{ type: 'rect',    x: number,  y: number,  w: number,  h: number,  fill?: boolean, fillOpacity?: number, opacity?: number }} RectMark */
+/** @typedef {{ type: 'path',    d: (string|number)[][],                          fill?: boolean, fillOpacity?: number, opacity?: number }} PathMark */
+/** @typedef {CircleMark | LineMark | PolygonMark | RectMark | PathMark} PatternMark */
+
+/** @type {Record<string, PatternMark[]>} */
+export const PATTERNS = {
+	// ── Line-based ──────────────────────────────────────────────────────────────
+
+	brick: [
+		{ type: 'line', x1: 0, y1: 0.25, x2: 0.5, y2: 0.25 },
+		{ type: 'line', x1: 0.5, y1: 0.75, x2: 1, y2: 0.75 },
+		{ type: 'line', x1: 0, y1: 0, x2: 0, y2: 1 },
+		{ type: 'line', x1: 1, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+	],
+
+	hatch: [
+		{ type: 'line', x1: 0, y1: 0.25, x2: 1, y2: 0.25 },
+		{ type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+		{ type: 'line', x1: 0, y1: 0.75, x2: 1, y2: 0.75 },
+		{ type: 'line', x1: 0.25, y1: 0, x2: 0.25, y2: 1 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 },
+		{ type: 'line', x1: 0.75, y1: 0, x2: 0.75, y2: 1 }
+	],
+
+	// Coordinates intentionally exceed 0–1 so lines tile seamlessly at tile edges
+	diagonal: [
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 }
+	],
+
+	// Two sets of diagonals crossing to form a diamond lattice
+	diamonds: [
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
+		{ type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 },
+		{ type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: 1.5 },
+		{ type: 'line', x1: 0.5, y1: -0.5, x2: 1.5, y2: 0.5 }
+	],
+
+	tile: [
+		{ type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+	],
+
+	// ── Path-based ──────────────────────────────────────────────────────────────
+
+	swell: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 0.3],
+				['A', 0.6, 0.5, 0, 0, 0, 1, 0.3]
+			]
+		}
+	],
+
+	waves: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 0.5],
+				['L', 0.25, 0],
+				['L', 0.75, 1],
+				['L', 1, 0.5]
+			]
+		}
+	],
+
+	// ── Circle-based ────────────────────────────────────────────────────────────
+
+	// Small filled dots in an X pattern across the tile
+	dots: [
+		{ type: 'circle', cx: 0.2, cy: 0.2, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.4, cy: 0.4, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.6, cy: 0.6, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.8, cy: 0.8, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.8, cy: 0.2, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.6, cy: 0.4, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.4, cy: 0.6, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.2, cy: 0.8, r: 0.08, fill: true }
+	],
+
+	// Outlined diamond (rotated square)
+	lattice: [
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0.22],
+				[0.78, 0.5],
+				[0.5, 0.78],
+				[0.22, 0.5]
+			]
+		}
+	],
+
+	// Fish-scale geometry as stroke only — same circles as petals, no fill
+	scales: [
+		{
+			type: 'path',
+			d: [
+				['M', -0.7071, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', 0.2929, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', -0.2071, 0.5],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', -0.7071, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', 0.2929, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0]
+			]
+		}
+	],
+
+	// Filled circles at tile corners + center (5-point dice pattern)
+	circles: [
+		{ type: 'circle', cx: 0.5, cy: 0.5, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0, cy: 0, r: 0.2, fill: true },
+		{ type: 'circle', cx: 1, cy: 0, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0, cy: 1, r: 0.2, fill: true },
+		{ type: 'circle', cx: 1, cy: 1, r: 0.2, fill: true }
+	],
+
+	// Diagonal cross strokes with a filled circle at the center
+	pip: [
+		{ type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'circle', cx: 0.5, cy: 0.5, r: 0.22, fill: true }
+	],
+
+	// Two outlined circles + two filled circles in a 2×2 grid
+	rings: [
+		{ type: 'circle', cx: 0.25, cy: 0.25, r: 0.2 },
+		{ type: 'circle', cx: 0.75, cy: 0.75, r: 0.2 },
+		{ type: 'circle', cx: 0.25, cy: 0.75, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0.75, cy: 0.25, r: 0.2, fill: true }
+	],
+
+	// Fish-scale: circles centered at corners + tile center, r = 0.5√2 so each
+	// circle passes through its adjacent neighbors' centers. Even-odd fill produces
+	// the scallop/petal pattern where overlapping regions alternate filled/clear.
+	petals: [
+		{
+			type: 'path',
+			fill: true,
+			fillRule: 'evenodd',
+			d: [
+				// center (0, 0)   r=0.7071  leftmost = (-0.7071, 0)
+				['M', -0.7071, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (1, 0)   leftmost = (0.2929, 0)
+				['M', 0.2929, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (0.5, 0.5)  leftmost = (-0.2071, 0.5)
+				['M', -0.2071, 0.5],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (0, 1)   leftmost = (-0.7071, 1)
+				['M', -0.7071, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (1, 1)   leftmost = (0.2929, 1)
+				['M', 0.2929, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0]
+			]
+		}
+	],
+
+	// ── Polygon-based ───────────────────────────────────────────────────────────
+
+	// Three filled triangles tiling the corners + center of the tile
+	triangles: [
+		{
+			type: 'polygon',
+			points: [
+				[0, 0.5],
+				[0.5, 1],
+				[0, 1]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0],
+				[0, 0],
+				[0, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0.5, 0.5],
+				[1, 1]
+			],
+			fill: true
+		}
+	],
+
+	// Two filled triangles scattered at opposite corners
+	shards: [
+		{
+			type: 'polygon',
+			points: [
+				[0.25, 0.017],
+				[0, 0.417],
+				[0.5, 0.417]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0.583],
+				[1, 0.583],
+				[0.75, 0.983]
+			],
+			fill: true
+		}
+	],
+
+	// Diagonal corner split — two-tone polygon division
+	wedge: [
+		{
+			type: 'polygon',
+			points: [
+				[1, 1],
+				[0.45, 1],
+				[0, 0.55],
+				[0, 0]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0, 0],
+				[1, 1]
+			],
+			fill: true,
+			fillOpacity: 0.55
+		}
+	],
+
+	// Two triangles pointing inward from top and bottom edges
+	argyle: [
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0.5, 0.5],
+				[0, 0]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 1],
+				[0.5, 0.5],
+				[0, 1]
+			],
+			fill: true
+		}
+	],
+
+	// triangles pattern rotated 90° clockwise: (x,y) → (1−y, x)
+	chevrons: [
+		{
+			type: 'polygon',
+			points: [
+				[0, 0],
+				[0.5, 0],
+				[0, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0],
+				[1, 0],
+				[1, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0, 1],
+				[1, 1],
+				[0.5, 0.5]
+			],
+			fill: true
+		}
+	],
+
+	// ── Rect-based ──────────────────────────────────────────────────────────────
+
+	checkerboard: [
+		{ type: 'rect', x: 0, y: 0, w: 0.5, h: 0.5, fill: true },
+		{ type: 'rect', x: 0.5, y: 0.5, w: 0.5, h: 0.5, fill: true }
+	],
+
+	// Quarter-circle filled shape (bottom-left corner) with two accent dots
+	shell: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 1],
+				['V', 0],
+				['H', 0.6],
+				['V', 0.4],
+				['A', 0.6, 0.6, 0, 0, 1, 0, 1]
+			],
+			fill: true
+		},
+		{ type: 'circle', cx: 0.798, cy: 0.298, r: 0.081, fill: true },
+		{ type: 'circle', cx: 0.798, cy: 0.702, r: 0.081, fill: true }
+	]
+}

package/src/patterns/scale.js

@@ -0,0 +1,116 @@
+/**
+ * Mark geometry scaling and attribute resolution utilities.
+ *
+ * All pattern coordinates are stored normalized 0–1.  `scaleMark` multiplies
+ * every geometric value by `size`.  `resolveMarkAttrs` then folds in the
+ * runtime fill/stroke colors and produces a plain object whose keys are
+ * valid SVG attribute names, ready for spread (`{...attrs}`).
+ *
+ * Path `A` (arc) commands: indices 2, 3, 4 are xRotation, largeArcFlag, and
+ * sweepFlag — NOT coordinates — and are never scaled.
+ *
+ * Source → SVG name mappings applied by scaleMark:
+ *   rect  w → width,  h → height
+ *   polygon  points [[x,y]…] → SVG points string
+ *   path  d [[cmd,…]…] → SVG d string
+ */
+
+/** @import { PatternMark } from './patterns.js' */
+
+/**
+ * Scale a single SVG path command by `size`.
+ * @param {(string|number)[]} cmd
+ * @param {number} size
+ * @returns {(string|number)[]}
+ */
+function scalePathCmd(cmd, size) {
+	const [op, ...args] = cmd
+	if (op === 'A' || op === 'a') {
+		return [
+			op,
+			args[0] * size,
+			args[1] * size,
+			args[2],
+			args[3],
+			args[4],
+			args[5] * size,
+			args[6] * size
+		]
+	}
+	return [op, ...args.map((v) => (typeof v === 'number' ? v * size : v))]
+}
+
+/**
+ * Scale all geometric coordinates in a mark by `size`.
+ * Renames rect `w`/`h` to `width`/`height` and converts polygon/path to strings.
+ * @param {PatternMark} mark
+ * @param {number} size
+ * @returns {object}
+ */
+export function scaleMark(mark, size) {
+	switch (mark.type) {
+		case 'line':
+			return {
+				...mark,
+				x1: mark.x1 * size,
+				y1: mark.y1 * size,
+				x2: mark.x2 * size,
+				y2: mark.y2 * size
+			}
+		case 'circle':
+			return { ...mark, cx: mark.cx * size, cy: mark.cy * size, r: mark.r * size }
+		case 'rect': {
+			const { w, h, ...rest } = mark
+			return { ...rest, x: mark.x * size, y: mark.y * size, width: w * size, height: h * size }
+		}
+		case 'polygon':
+			return { ...mark, points: mark.points.map(([x, y]) => `${x * size},${y * size}`).join(' ') }
+		case 'path':
+			return {
+				...mark,
+				d: mark.d
+					.map((cmd) => scalePathCmd(cmd, size))
+					.map((cmd) => cmd.join(' '))
+					.join(' ')
+			}
+		default:
+			return mark
+	}
+}
+
+/**
+ * Resolve a scaled mark into SVG-ready `{ type, attrs }`.
+ * `attrs` can be spread directly onto the SVG element.
+ *
+ * Per-mark overrides respected:
+ *   mark.strokeWidth  → `stroke-width` (takes precedence over `thickness`)
+ *   mark.fillOpacity  → `fill-opacity`
+ *   mark.opacity      → `opacity`
+ *
+ * @param {object} scaledMark  Output of scaleMark
+ * @param {{ fill: string, stroke: string, thickness: number }} appearance
+ * @returns {{ type: string, attrs: object }}
+ */
+export function resolveMarkAttrs(scaledMark, { fill, stroke, thickness }) {
+	const {
+		type,
+		fill: isFill,
+		strokeWidth,
+		fillOpacity,
+		opacity,
+		fillRule,
+		...geometry
+	} = scaledMark
+
+	const attrs = {
+		...geometry,
+		fill: isFill ? fill : 'none',
+		stroke: isFill ? 'none' : stroke,
+		'stroke-width': isFill ? 0 : (strokeWidth ?? thickness)
+	}
+	if (fillOpacity !== null && fillOpacity !== undefined) attrs['fill-opacity'] = fillOpacity
+	if (opacity !== null && opacity !== undefined) attrs.opacity = opacity
+	if (fillRule !== null && fillRule !== undefined) attrs['fill-rule'] = fillRule
+
+	return { type, attrs }
+}

package/src/spec/chart-spec.js

@@ -0,0 +1,72 @@
+export class ChartSpec {
+	constructor(data) {
+		this.data = data ?? []
+		this.channels = {}
+		this.layers = []
+		this.options = {}
+	}
+
+	x(f) {
+		this.channels.x = f
+		return this
+	}
+	y(f) {
+		this.channels.y = f
+		return this
+	}
+	color(f) {
+		this.channels.color = f
+		return this
+	}
+	pattern(f) {
+		this.channels.pattern = f
+		return this
+	}
+	aes(ch) {
+		Object.assign(this.channels, ch)
+		return this
+	}
+
+	bar(opts = {}) {
+		this.layers.push({ type: 'bar', ...opts })
+		return this
+	}
+	line(opts = {}) {
+		this.layers.push({ type: 'line', ...opts })
+		return this
+	}
+	area(opts = {}) {
+		this.layers.push({ type: 'area', ...opts })
+		return this
+	}
+	arc(opts = {}) {
+		this.layers.push({ type: 'arc', ...opts })
+		return this
+	}
+	point(opts = {}) {
+		this.layers.push({ type: 'point', ...opts })
+		return this
+	}
+
+	grid(opts = {}) {
+		this.options.grid = opts
+		return this
+	}
+	legend(opts = {}) {
+		this.options.legend = opts
+		return this
+	}
+	axis(type, opts = {}) {
+		this.options[`axis_${type}`] = opts
+		return this
+	}
+	size(w, h) {
+		this.options.width = w
+		this.options.height = h
+		return this
+	}
+}
+
+export function chart(data, channels = {}) {
+	return new ChartSpec(data).aes(channels)
+}

package/src/symbols/RoundedSquare.svelte

@@ -1,15 +1,21 @@
 <script>
-	export let x = 0
-	export let y = 0
-	export let size = 1
-	export let fill = 'currentColor'
-	export let stroke = 'currentColor'
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		...restProps
+	} = $props()
 
-	$: r = size * 3.534
-	$: props = { rx: r * 0.1, ry: r * 0.1, ...$$restProps }
+	let r = $derived(size * 3.534)
+	let props = $derived({ rx: r * 0.1, ry: r * 0.1, ...restProps })
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <rect
 	x={x - r}
 	y={y - r}
@@ -19,9 +25,9 @@
 	{stroke}
 	{...props}
 	role="button"
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
 	tabindex="0"
 />

package/src/symbols/Shape.svelte

@@ -1,31 +1,37 @@
 <script>
 	import { namedShapes } from './constants'
 
-	export let x = 0
-	export let y = 0
-	export let size = 1
-	export let fill = 'none'
-	export let stroke = 'currentColor'
-	export let thickness = 1
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'none',
+		stroke = 'currentColor',
+		thickness = 1,
+		name = 'circle',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		onblur
+	} = $props()
 
-	export let name = 'circle'
-
-	$: d = name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size)
+	let d = $derived(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <path
 	{d}
 	{fill}
 	{stroke}
 	transform="translate({x},{y})"
 	stroke-width={thickness}
-	fill-rule="evenodd"
+	fill-rule="nonzero"
 	role="button"
-	on:click
-	on:mouseover
-	on:mouseleave
-	on:focus
-	on:blur
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	{onblur}
 	tabindex="0"
 />

package/src/symbols/constants/index.js

@@ -1,4 +1,4 @@
 import { scaledPathCollection } from '../../lib/utils'
-import paths from './shapes.json'
+import paths from './shapes.json' with { type: 'json' }
 
 export const namedShapes = scaledPathCollection(paths)

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/lib/index.js

@@ -1,4 +0,0 @@
-export { swatch } from './swatch'
-export { swatchGrid } from './grid'
-export * from './chart'
-export * from './brewer'

package/src/lib/plots.js

@@ -1,27 +0,0 @@
-// skipcq: JS-C1003 - Importing all plots from observablehq/plot
-import * as Plot from '@observablehq/plot'
-
-export function plotter(node, options) {
-	let { data, aes, type, opts } = options
-	// let chart = Plot.lineY(options.data).plot({ grid: true })
-
-	function render() {
-		const chart = Plot[type](data, aes).plot({
-			color: { scheme: 'turbo', range: [0.1, 0.9] },
-			...opts
-		})
-		node.firstChild?.remove() // remove old chart, if any
-		node.append(chart)
-	}
-	render()
-
-	return {
-		update: (input) => {
-			data = input.data
-			aes = input.aes
-			type = input.type
-			opts = input.opts
-			render()
-		}
-	}
-}