@volter/editor-sdk 0.5.57

package/src/widgets/inspector-widgets/CurveEditor.tsx

@@ -0,0 +1,359 @@
+/**
+ * CurveEditor (W1b) — SVG piecewise-bezier curve editor over the
+ * `CurveSegment[]` shape (`curve-utils.ts`), which is structurally the
+ * engine schema's `PiecewiseBezier.functions` AND three.quarks' native JSON.
+ *
+ * Deliberately generic (value curve in, curve out — zero particle coupling):
+ * the particle inspector's over-lifetime modules use it today; future
+ * consumers reuse it as-is.
+ *
+ * Interactions: drag keys (endpoints value-only, interior keys time+value),
+ * drag tangent handles of the selected key, double-click the plot to insert
+ * a key (exact de Casteljau split), Delete/Backspace or the footer × to
+ * remove an interior key. Y-range auto-fits to the curve with axis labels.
+ * Contract: `ChangeHandlers<CurveSegment[]>` — `onChange` fires live during
+ * a drag, `onChangeEnd` once per gesture (the caller's single undo step).
+ */
+
+import { useMemo, useRef, useState } from 'react';
+import { Button, NumberInput } from '../design-system';
+import {
+  type CurveSegment,
+  curveKeys,
+  curveValueRange,
+  deleteKey,
+  moveKey,
+  moveTangent,
+  segmentEnd,
+  splitAt,
+} from './curve-utils';
+import { type ChangeHandlers, fireChange, fireEnd, THEME } from './shared';
+
+export type { CurveBezier, CurveKey, CurveSegment } from './curve-utils';
+
+export interface CurveEditorProps extends ChangeHandlers<CurveSegment[]> {
+  /** Plot height in px (default 90). */
+  height?: number | undefined;
+  /** Curve stroke color (default the theme accent). */
+  color?: string | undefined;
+  /** Root-element test id (default `curve-editor`). */
+  testId?: string | undefined;
+}
+
+const PAD_L = 34; // room for y-axis labels
+const PAD_R = 6;
+const PAD_T = 6;
+const PAD_B = 14; // room for x-axis labels
+const WIDTH = 260; // viewBox width — the element itself is 100% wide
+
+function formatAxis(v: number): string {
+  if (Math.abs(v) >= 100) return v.toFixed(0);
+  if (Math.abs(v) >= 1) return String(Math.round(v * 100) / 100);
+  return String(Math.round(v * 1000) / 1000);
+}
+
+export function CurveEditor({
+  value,
+  onChange,
+  onChangeEnd,
+  disabled,
+  height = 90,
+  color,
+  testId = 'curve-editor',
+}: CurveEditorProps): React.ReactElement {
+  const [selectedKey, setSelectedKey] = useState(0);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  // The in-flight gesture's latest curve — window-level listeners see stale
+  // React props, so drags accumulate against this ref, not `value`.
+  const dragCurve = useRef<CurveSegment[] | null>(null);
+
+  const keys = useMemo(() => curveKeys(value), [value]);
+
+  // --- plot coordinate mapping (y auto-fit with padding) ---
+  const range = useMemo(() => {
+    const { min, max } = curveValueRange(value);
+    if (max - min < 1e-6) return { min: min - 1, max: max + 1 };
+    const pad = (max - min) * 0.1;
+    return { min: min - pad, max: max + pad };
+  }, [value]);
+
+  const plotW = WIDTH - PAD_L - PAD_R;
+  const plotH = height - PAD_T - PAD_B;
+  const xOf = (t: number): number => PAD_L + t * plotW;
+  const yOf = (v: number): number =>
+    PAD_T + (1 - (v - range.min) / (range.max - range.min)) * plotH;
+  const tOf = (x: number): number => Math.max(0, Math.min(1, (x - PAD_L) / plotW));
+  const vOf = (y: number): number =>
+    range.min + (1 - (y - PAD_T) / plotH) * (range.max - range.min);
+
+  /** Pointer event → plot-space (t, v) using the rendered element's box. */
+  const plotPoint = (e: { clientX: number; clientY: number }): { t: number; v: number } => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect) return { t: 0, v: 0 };
+    const x = ((e.clientX - rect.left) / rect.width) * WIDTH;
+    const y = ((e.clientY - rect.top) / rect.height) * height;
+    return { t: tOf(x), v: vOf(y) };
+  };
+
+  // The curve path: x is linear in each segment's normalized time, so the
+  // plotted curve is an EXACT svg cubic with x-controls at 1/3 and 2/3.
+  const path = useMemo(() => {
+    if (value.length === 0) return '';
+    let d = `M ${xOf(value[0]!.start)} ${yOf(value[0]!.function.p0)}`;
+    for (let i = 0; i < value.length; i++) {
+      const s = value[i]!;
+      const end = segmentEnd(value, i);
+      const w = end - s.start;
+      d += ` C ${xOf(s.start + w / 3)} ${yOf(s.function.p1)}, ${xOf(s.start + (2 * w) / 3)} ${yOf(s.function.p2)}, ${xOf(end)} ${yOf(s.function.p3)}`;
+    }
+    return d;
+  }, [value, range, height]);
+
+  const commit = (next: CurveSegment[]): void => fireEnd({ onChange, onChangeEnd }, next);
+  const live = (next: CurveSegment[]): void => fireChange({ onChange }, next);
+
+  /** Shared drag loop: apply(t, v) produces the next curve from a pointer position. */
+  const beginDrag = (
+    e: React.PointerEvent,
+    apply: (base: CurveSegment[], t: number, v: number) => CurveSegment[],
+  ): void => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    dragCurve.current = value;
+    const onMove = (me: PointerEvent): void => {
+      const { t, v } = plotPoint(me);
+      const next = apply(dragCurve.current ?? value, t, v);
+      dragCurve.current = next;
+      live(next);
+    };
+    const onUp = (me: PointerEvent): void => {
+      const { t, v } = plotPoint(me);
+      const next = apply(dragCurve.current ?? value, t, v);
+      dragCurve.current = null;
+      commit(next);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  };
+
+  const stroke = color ?? THEME.accent;
+  const n = value.length;
+  const selected = keys[selectedKey];
+  const canDelete = selectedKey > 0 && selectedKey < n;
+
+  // Tangent handle geometry for the selected key.
+  const outSeg = selectedKey < n ? value[selectedKey] : undefined;
+  const inSeg = selectedKey > 0 ? value[selectedKey - 1] : undefined;
+  const outHandle = outSeg
+    ? {
+        x: xOf(outSeg.start + (segmentEnd(value, selectedKey) - outSeg.start) / 3),
+        y: yOf(outSeg.function.p1),
+      }
+    : null;
+  const inHandle = inSeg
+    ? {
+        x: xOf(inSeg.start + ((segmentEnd(value, selectedKey - 1) - inSeg.start) * 2) / 3),
+        y: yOf(inSeg.function.p2),
+      }
+    : null;
+
+  const yTicks = [range.min, (range.min + range.max) / 2, range.max];
+
+  return (
+    <div data-testid={testId}>
+      <svg
+        ref={svgRef}
+        data-testid={`${testId}-plot`}
+        viewBox={`0 0 ${WIDTH} ${height}`}
+        style={{
+          width: '100%',
+          height,
+          display: 'block',
+          background: THEME.inputBg,
+          border: `1px solid ${THEME.border}`,
+          borderRadius: THEME.radiusSmall,
+          touchAction: 'none',
+          outline: 'none',
+        }}
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: the plot IS the interactive surface (role=application); focus enables the Delete-key path
+        tabIndex={0}
+        role="application"
+        aria-label="Curve editor"
+        onKeyDown={(e) => {
+          if ((e.key === 'Delete' || e.key === 'Backspace') && canDelete && !disabled) {
+            e.preventDefault();
+            commit(deleteKey(value, selectedKey));
+            setSelectedKey(Math.max(0, selectedKey - 1));
+          }
+        }}
+        onDoubleClick={(e) => {
+          if (disabled) return;
+          const { t } = plotPoint(e);
+          const next = splitAt(value, t);
+          if (next !== value) {
+            commit(next);
+            setSelectedKey(next.findIndex((s) => Math.abs(s.start - t) < 1e-6));
+          }
+        }}
+      >
+        {/* axes + grid */}
+        {yTicks.map((v) => (
+          <g key={v}>
+            <line
+              x1={PAD_L}
+              x2={WIDTH - PAD_R}
+              y1={yOf(v)}
+              y2={yOf(v)}
+              stroke={THEME.border}
+              strokeWidth={0.5}
+            />
+            <text
+              x={PAD_L - 3}
+              y={yOf(v) + 2.5}
+              fontSize={7}
+              fill={THEME.textMuted}
+              textAnchor="end"
+            >
+              {formatAxis(v)}
+            </text>
+          </g>
+        ))}
+        {[0, 0.5, 1].map((t) => (
+          <text
+            key={t}
+            x={xOf(t)}
+            y={height - 3}
+            fontSize={7}
+            fill={THEME.textMuted}
+            textAnchor="middle"
+          >
+            {t}
+          </text>
+        ))}
+
+        {/* the curve */}
+        <path d={path} fill="none" stroke={stroke} strokeWidth={1.5} />
+
+        {/* tangent handles for the selected key */}
+        {selected && outHandle && (
+          <g>
+            <line
+              x1={xOf(selected.time)}
+              y1={yOf(selected.value)}
+              x2={outHandle.x}
+              y2={outHandle.y}
+              stroke={THEME.textMuted}
+              strokeDasharray="2 2"
+              strokeWidth={0.75}
+            />
+            <circle
+              data-testid={`${testId}-tangent-out`}
+              cx={outHandle.x}
+              cy={outHandle.y}
+              r={3}
+              fill={THEME.surface}
+              stroke={THEME.textMuted}
+              style={{ cursor: disabled ? 'not-allowed' : 'ns-resize' }}
+              onPointerDown={(e) =>
+                beginDrag(e, (base, _t, v) => moveTangent(base, selectedKey, 'out', v))
+              }
+            />
+          </g>
+        )}
+        {selected && inHandle && (
+          <g>
+            <line
+              x1={xOf(selected.time)}
+              y1={yOf(selected.value)}
+              x2={inHandle.x}
+              y2={inHandle.y}
+              stroke={THEME.textMuted}
+              strokeDasharray="2 2"
+              strokeWidth={0.75}
+            />
+            <circle
+              data-testid={`${testId}-tangent-in`}
+              cx={inHandle.x}
+              cy={inHandle.y}
+              r={3}
+              fill={THEME.surface}
+              stroke={THEME.textMuted}
+              style={{ cursor: disabled ? 'not-allowed' : 'ns-resize' }}
+              onPointerDown={(e) =>
+                beginDrag(e, (base, _t, v) => moveTangent(base, selectedKey, 'in', v))
+              }
+            />
+          </g>
+        )}
+
+        {/* keys */}
+        {keys.map((k, i) => (
+          <circle
+            key={i}
+            data-testid={`${testId}-key-${i}`}
+            cx={xOf(k.time)}
+            cy={yOf(k.value)}
+            r={4}
+            fill={i === selectedKey ? THEME.accent : THEME.surface}
+            stroke={i === selectedKey ? THEME.onAccent : stroke}
+            strokeWidth={1.25}
+            style={{ cursor: disabled ? 'not-allowed' : 'move' }}
+            onPointerDown={(e) => {
+              setSelectedKey(i);
+              beginDrag(e, (base, t, v) => moveKey(base, i, t, v));
+            }}
+          />
+        ))}
+      </svg>
+
+      {/* selected-key detail row */}
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center', marginTop: 3 }}>
+        <span style={{ fontSize: 9, color: THEME.textMuted, flex: '0 0 auto' }}>
+          Key {selectedKey + 1}/{keys.length}
+        </span>
+        <NumberInput
+          label="t"
+          value={selected ? Math.round(selected.time * 1000) / 1000 : null}
+          step={0.05}
+          testId={`${testId}-key-time`}
+          onChange={(t) => {
+            if (selected) live(moveKey(value, selectedKey, t, selected.value));
+          }}
+          onChangeEnd={(t) => {
+            if (selected) commit(moveKey(value, selectedKey, t, selected.value));
+          }}
+        />
+        <NumberInput
+          label="v"
+          value={selected ? Math.round(selected.value * 1000) / 1000 : null}
+          step={0.05}
+          testId={`${testId}-key-value`}
+          onChange={(v) => {
+            if (selected) live(moveKey(value, selectedKey, selected.time, v));
+          }}
+          onChangeEnd={(v) => {
+            if (selected) commit(moveKey(value, selectedKey, selected.time, v));
+          }}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="compact"
+          data-testid={`${testId}-delete-key`}
+          disabled={!canDelete || disabled === true}
+          aria-label="Delete curve key"
+          title={canDelete ? 'Delete key' : 'Endpoint keys cannot be deleted'}
+          onClick={() => {
+            commit(deleteKey(value, selectedKey));
+            setSelectedKey(Math.max(0, selectedKey - 1));
+          }}
+        >
+          ×
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/widgets/inspector-widgets/FilterEditor.tsx

@@ -0,0 +1,108 @@
+/**
+ * FilterEditor — `filter`/`backdrop-filter` function sliders (blur/
+ * brightness/contrast/saturate/grayscale/hue-rotate), add/remove-by-slider
+ * (each function resets to its identity default when dragged back to it —
+ * matching the reference's "omit default-valued functions from the composed
+ * string" behavior) (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s
+ * `FilterEditor`/`FILTER_DEFS` (:1530-1620); the reference's expand/collapse
+ * chrome is left to the calling SECTION (Effects) — this widget renders its
+ * sliders directly given a value, matching this kit's "widgets are pure,
+ * sections own layout/disclosure" split.
+ */
+
+import { ScrubbableInput } from './ScrubbableInput';
+import { type ChangeHandlers, fireChange, fireEnd, THEME } from './shared';
+
+interface FilterDef {
+  name: string;
+  unit: string;
+  min: number;
+  max: number;
+  step: number;
+  default: number;
+}
+
+const FILTER_DEFS: FilterDef[] = [
+  { name: 'blur', unit: 'px', min: 0, max: 50, step: 0.5, default: 0 },
+  { name: 'brightness', unit: '%', min: 0, max: 300, step: 1, default: 100 },
+  { name: 'contrast', unit: '%', min: 0, max: 300, step: 1, default: 100 },
+  { name: 'saturate', unit: '%', min: 0, max: 300, step: 1, default: 100 },
+  { name: 'grayscale', unit: '%', min: 0, max: 100, step: 1, default: 0 },
+  { name: 'hue-rotate', unit: 'deg', min: 0, max: 360, step: 1, default: 0 },
+];
+
+export interface FilterFunc {
+  name: string;
+  value: number;
+}
+
+export function parseFilterFunctions(filter: string): FilterFunc[] {
+  if (!filter || filter === 'none') {
+    return FILTER_DEFS.map((d) => ({ name: d.name, value: d.default }));
+  }
+  return FILTER_DEFS.map((def) => {
+    const regex = new RegExp(`${def.name}\\(([\\d.]+)${def.unit}?\\)`);
+    const m = filter.match(regex);
+    return { name: def.name, value: m?.[1] ? Number.parseFloat(m[1]) : def.default };
+  });
+}
+
+export function composeFilter(funcs: FilterFunc[]): string {
+  const parts: string[] = [];
+  for (let i = 0; i < funcs.length; i++) {
+    const f = funcs[i];
+    const def = FILTER_DEFS[i];
+    if (f && def && f.value !== def.default) parts.push(`${f.name}(${f.value}${def.unit})`);
+  }
+  return parts.length ? parts.join(' ') : 'none';
+}
+
+export interface FilterEditorProps extends ChangeHandlers<FilterFunc[]> {
+  /** Cosmetic only — "Filter" vs "Backdrop Filter" label for the caller's section. */
+  label?: string | undefined;
+  /** Root-element test id. Defaults to the stable `filter-editor`; a node with
+   *  BOTH a `filter` and a `backdropFilter` row renders two of these, so the
+   *  inspector passes a per-row id to keep the roots distinct (spec 27 §5 C2, S1). */
+  testId?: string | undefined;
+}
+
+export function FilterEditor({
+  value,
+  onChange,
+  onChangeEnd,
+  disabled,
+  label = 'Filter',
+  testId = 'filter-editor',
+}: FilterEditorProps): React.ReactElement {
+  const apply = (index: number, v: number, commit: boolean): void => {
+    const next = value.map((f, i) => (i === index ? { ...f, value: v } : f));
+    if (commit) fireEnd({ onChange, onChangeEnd }, next);
+    else fireChange({ onChange }, next);
+  };
+
+  return (
+    <div data-testid={testId}>
+      <div style={{ fontSize: 9, color: THEME.textMuted, marginBottom: 4 }}>{label}</div>
+      {value.map((f, i) => {
+        const def = FILTER_DEFS[i];
+        if (!def) return null;
+        return (
+          <div key={f.name} data-testid={`filter-row-${f.name}`} style={{ marginBottom: 3 }}>
+            <ScrubbableInput
+              testId={`filter-${f.name}`}
+              label={f.name.replace('hue-rotate', 'hue')}
+              value={f.value}
+              unit={def.unit}
+              min={def.min}
+              max={def.max}
+              step={def.step}
+              disabled={disabled}
+              onChange={(v) => apply(i, v, false)}
+              onChangeEnd={(v) => apply(i, v, true)}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/widgets/inspector-widgets/FontPicker.tsx

@@ -0,0 +1,191 @@
+import { Button, EditorPopover, TextInput } from '../design-system';
+/**
+ * FontPicker — a searchable, windowed (virtualized-by-hand, no new dep) font
+ * list (spec 27 §5 C1). Ported from `visual-edit/inspector.tsx`'s
+ * `FontPicker` (:1958-2093); the reference fetched fonts async through its
+ * `ParentBridge.getAvailableFonts()` (an iframe-bridge RPC this editor has no
+ * equivalent of) — here `fonts` is passed in directly by the caller, wired
+ * at C2 to the editor's OWN font source, `ui-source/inspect.ts:
+ * getAvailableFonts()` (browser `document.fonts` + the web-safe fallback
+ * list, already merged/sorted there — no re-implementation needed).
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DisclosureIcon } from '../design-system';
+import { type ChangeHandlers, THEME } from './shared';
+
+const ITEM_HEIGHT = 28;
+const MAX_VISIBLE = 10;
+
+export interface FontPickerProps extends ChangeHandlers<string> {
+  /** The available font families — wire to `getAvailableFonts()` at C2. */
+  fonts: readonly string[];
+  /** Root-element test id. Defaults to the stable `font-picker`; a node with a
+   *  fontFamily on BOTH the style row and a component prop renders two, so the
+   *  inspector passes a per-row id to keep the roots distinct (spec 27 §5 C2, S1). */
+  testId?: string | undefined;
+}
+
+export function FontPicker({
+  value,
+  onChange,
+  disabled,
+  fonts,
+  testId = 'font-picker',
+}: FontPickerProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) searchRef.current?.focus();
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent): void => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!search) return fonts;
+    const q = search.toLowerCase();
+    return fonts.filter((f) => f.toLowerCase().includes(q));
+  }, [fonts, search]);
+
+  const totalHeight = filtered.length * ITEM_HEIGHT;
+  const startIndex = Math.floor(scrollTop / ITEM_HEIGHT);
+  const endIndex = Math.min(filtered.length, startIndex + MAX_VISIBLE + 2);
+  const visible = filtered.slice(startIndex, endIndex);
+
+  const select = (font: string): void => {
+    onChange(font);
+    setOpen(false);
+    setSearch('');
+  };
+
+  const displayValue = value.replace(/^["']|["']$/g, '');
+
+  return (
+    <div ref={containerRef} data-testid={testId} style={{ position: 'relative', flex: 1 }}>
+      <Button
+        type="button"
+        variant="secondary"
+        className="vgai-field-trigger"
+        /* This trigger opens a listbox popover and never said so: the ARIA was
+           missing, which is both an a11y defect and — since the widget classes
+           landed — what decides whether it paints as a menu well or a
+           pushbutton (`theme.css`, the `wcol_menu` rule). */
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        disabled={disabled}
+        data-testid="font-picker-input"
+        onClick={() => {
+          if (!disabled) setOpen((v) => !v);
+        }}
+      >
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {displayValue || '—'}
+        </span>
+        <DisclosureIcon direction="down" tone="muted" style={{ marginLeft: 4 }} />
+      </Button>
+      {open && (
+        <EditorPopover
+          data-testid="font-picker-dropdown"
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            zIndex: 'var(--vgai-z-dropdown)',
+            marginTop: 2,
+          }}
+        >
+          <div style={{ padding: 4 }}>
+            <TextInput
+              ref={searchRef}
+              type="text"
+              data-testid="font-picker-search"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setScrollTop(0);
+              }}
+              placeholder="Search fonts…"
+              data-density="compact"
+              style={{
+                width: '100%',
+                boxSizing: 'border-box',
+              }}
+            />
+          </div>
+          <div
+            data-testid="font-picker-list"
+            onScroll={(e) => setScrollTop((e.target as HTMLDivElement).scrollTop)}
+            style={{ maxHeight: MAX_VISIBLE * ITEM_HEIGHT, overflowY: 'auto' }}
+          >
+            <div style={{ height: totalHeight, position: 'relative' }}>
+              {visible.map((font, i) => {
+                const actualIndex = startIndex + i;
+                const isActive = font.toLowerCase() === displayValue.toLowerCase();
+                return (
+                  <div
+                    key={font}
+                    data-testid={`font-picker-option-${font}`}
+                    onClick={() => select(font)}
+                    style={{
+                      position: 'absolute',
+                      top: actualIndex * ITEM_HEIGHT,
+                      left: 0,
+                      right: 0,
+                      height: ITEM_HEIGHT,
+                      display: 'flex',
+                      alignItems: 'center',
+                      padding: '0 8px',
+                      cursor: 'pointer',
+                      fontSize: 12,
+                      background: isActive ? THEME.accent : 'transparent',
+                      color: isActive ? THEME.onAccent : THEME.text,
+                    }}
+                  >
+                    <span
+                      style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                    >
+                      {font}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {filtered.length === 0 && (
+            <div
+              style={{
+                padding: '8px 12px',
+                color: THEME.textMuted,
+                fontSize: 10,
+                textAlign: 'center',
+              }}
+            >
+              No matching fonts
+            </div>
+          )}
+        </EditorPopover>
+      )}
+    </div>
+  );
+}