pmx-canvas 0.8.2 → 0.9.0

package/src/client/canvas/Presentation.tsx

@@ -1,9 +1,15 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { cameraSchema, interpolateCamera, resolveStop, type Camera, type Tour } from '../../shared/tour.js';
+import { useEffect } from 'preact/hooks';
+import { cameraSchema, type Camera } from '../../shared/tour.js';
 import { canvasArea } from './canvas-area';
-import { cancelViewportAnimation, hasInitialServerLayout, nodes, viewport } from '../state/canvas-store';
-import { presenting, recordingCamera } from '../state/presentation';
-import { requestJson } from '../state/intent-bridge';
+import { cancelViewportAnimation, hasInitialServerLayout, viewport } from '../state/canvas-store';
+import {
+  endPresentation,
+  presentationError,
+  presenting,
+  recordingCamera,
+  startPresentation,
+  stepTour,
+} from '../state/presentation';
 import { usePanZoom } from './use-pan-zoom';
 
 declare global {
@@ -18,14 +24,10 @@ declare global {
 }
 
 export function Presentation() {
-  const [tour, setTour] = useState<Tour>({ stops: [] });
-  const [index, setIndex] = useState(0);
-  const [error, setError] = useState('');
   const active = presenting.value;
   const ready = hasInitialServerLayout.value;
-  const frame = useRef(0);
   const moveCamera = (camera: Camera) => {
-    cancelAnimationFrame(frame.current);
+    cancelViewportAnimation();
     viewport.value = camera;
   };
   // A separate gesture surface keeps cards read-only and camera changes local.
@@ -58,45 +60,10 @@ export function Presentation() {
       recordingCamera.value = false;
     };
   }, []);
+  // `?present=1` joins the tour where it is (an agent may already be driving it).
   useEffect(() => {
-    if (!active || !ready) return;
-    let cancelled = false;
-    void requestJson('read tour', '/api/canvas/tour', { tour: { stops: [] } as Tour }).then((result) => {
-      if (!cancelled) {
-        setTour(result.tour);
-        setIndex(0);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [active, ready]);
-  useEffect(() => {
-    if (!active || recordingCamera.value) return;
-    const stop = tour.stops[index];
-    if (!stop) return;
-    const area = canvasArea();
-    let target: Camera;
-    try {
-      target = resolveStop(stop, [...nodes.value.values()], area.width, area.height);
-      setError('');
-    } catch (error) {
-      setError(error instanceof Error ? error.message : String(error));
-      return;
-    }
-    cancelViewportAnimation();
-    const from = { ...viewport.value };
-    const start = performance.now();
-    const duration = (stop.duration ?? 1) * 1000;
-    const tick = (now: number) => {
-      if (recordingCamera.value) return;
-      const t = duration === 0 ? 1 : Math.min(1, (now - start) / duration);
-      viewport.value = interpolateCamera(from, target, t, area.width, area.height, stop.easing, stop.pullback);
-      if (t < 1) frame.current = requestAnimationFrame(tick);
-    };
-    frame.current = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame.current);
-  }, [active, index, tour]);
+    if (ready && presenting.value && !recordingCamera.value) void startPresentation(true);
+  }, [ready]);
   useEffect(() => {
     if (!active) return;
     const key = (event: KeyboardEvent) => {
@@ -104,14 +71,13 @@ export function Presentation() {
       if (event.target instanceof HTMLButtonElement && ['Enter', ' '].includes(event.key)) return;
       if (['Escape', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', ' '].includes(event.key))
         event.preventDefault();
-      if (event.key === 'Escape') presenting.value = false;
-      if (['ArrowRight', 'ArrowDown', ' '].includes(event.key))
-        setIndex((i) => Math.max(0, Math.min(tour.stops.length - 1, i + 1)));
-      if (['ArrowLeft', 'ArrowUp'].includes(event.key)) setIndex((i) => Math.max(0, i - 1));
+      if (event.key === 'Escape') endPresentation();
+      if (['ArrowRight', 'ArrowDown', ' '].includes(event.key)) void stepTour({ step: 'next' });
+      if (['ArrowLeft', 'ArrowUp'].includes(event.key)) void stepTour({ step: 'previous' });
     };
     document.addEventListener('keydown', key, true);
     return () => document.removeEventListener('keydown', key, true);
-  }, [active, tour]);
+  }, [active]);
   return active ? (
     <>
       {!recordingCamera.value && (
@@ -119,18 +85,18 @@ export function Presentation() {
           class="presentation-navigation"
           ref={navigationRef}
           onPointerDown={(event) => {
-            if (event.button === 1 || event.button === 2) cancelAnimationFrame(frame.current);
+            if (event.button === 1 || event.button === 2) cancelViewportAnimation();
           }}
           onContextMenu={(event) => event.preventDefault()}
         >
-          <button type="button" class="presentation-exit" onClick={() => (presenting.value = false)}>
+          <button type="button" class="presentation-exit" onClick={endPresentation}>
             Exit presentation
           </button>
         </div>
       )}
-      {error && (
+      {presentationError.value && (
         <div class="presentation-error" role="alert">
-          {error}
+          {presentationError.value}
         </div>
       )}
     </>

package/src/client/canvas/RelationPresetsDialog.tsx

@@ -0,0 +1,413 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { RelationDefinition, RelationPreset } from '../../shared/relations.js';
+import { boardList, updateBoard } from '../state/boards-store';
+import { requestJson } from '../state/intent-bridge';
+import { knowledge, refreshKnowledge } from '../state/knowledge-store';
+import { useFocusTrap } from './use-focus-trap';
+
+/** Shared templates live in Home; applying one never rewrites connection kinds. */
+export function RelationPresetsDialog({ onClose }: { onClose: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const presets = knowledge.value?.relationPresets;
+  // Until the user chooses, the first saved preset follows catalog availability.
+  // Explicit null (new/deleted preset) must not silently select another template.
+  const [selection, setSelected] = useState<RelationPreset | null | undefined>();
+  const selected = selection === undefined ? (presets?.[0] ?? null) : selection;
+  const [editing, setEditing] = useState<RelationPreset | null>(null);
+  const [baseline, setBaseline] = useState<RelationPreset | null>(null);
+  const [pending, setPending] = useState<(() => void) | null>(null);
+  const [boardId, setBoardId] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState('');
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const guardRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!pending) return;
+    const previous = document.activeElement;
+    guardRef.current?.querySelector('button')?.focus();
+    return () => {
+      if (previous instanceof HTMLElement && previous.isConnected) previous.focus();
+    };
+  }, [pending]);
+  const existing = selected;
+  const dirty = editing !== null && JSON.stringify(editing) !== JSON.stringify(baseline);
+  const leave = (action: () => void) => {
+    if (busy) return;
+    if (dirty) setPending(() => action);
+    else action();
+  };
+  const handleEscape = () => {
+    if (pending) setPending(null);
+    else if (confirmDelete) setConfirmDelete(false);
+    else leave(onClose);
+  };
+  useFocusTrap(ref, true, { onEscape: handleEscape });
+  const choose = (preset: RelationPreset | null) => {
+    setSelected(preset ? structuredClone(preset) : null);
+    setEditing(null);
+    setBaseline(null);
+    setConfirmDelete(false);
+    setMessage('');
+  };
+  const changeKind = (index: number, change: Partial<RelationDefinition>) => {
+    if (editing)
+      setEditing({
+        ...editing,
+        vocabulary: editing.vocabulary.map((kind, i) => (i === index ? { ...kind, ...change } : kind)),
+      });
+  };
+  return (
+    <div
+      class="knowledge-backdrop"
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          handleEscape();
+        }
+      }}
+    >
+      <div
+        ref={ref}
+        class="knowledge-dialog is-category-editor relation-presets-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Workspace relation presets"
+      >
+        <header>
+          <h2>Workspace relation presets</h2>
+          <button
+            type="button"
+            disabled={busy || !!pending}
+            aria-label="Close relation presets"
+            onClick={() => leave(onClose)}
+          >
+            ×
+          </button>
+        </header>
+        <p>Saved templates are shared across the workspace. Saving does not apply a preset to any board.</p>
+        {message && <p role="status">{message}</p>}
+        {pending && (
+          <div
+            ref={guardRef}
+            role="alertdialog"
+            aria-label="Discard preset changes"
+            aria-modal="true"
+            class="relation-dirty-guard"
+          >
+            <p>Discard unsaved preset changes?</p>
+            <button type="button" onClick={() => setPending(null)}>
+              Keep editing
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                const action = pending;
+                setPending(null);
+                action();
+              }}
+            >
+              Discard changes
+            </button>
+          </div>
+        )}
+        <div inert={pending ? true : undefined}>
+          {!presets ? (
+            <p>Relation presets unavailable. Close and retry.</p>
+          ) : (
+            <div class="category-editor-columns">
+              <section>
+                <h3>{presets.length} presets</h3>
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() =>
+                    leave(() => {
+                      choose(null);
+                      const draft = { id: crypto.randomUUID(), name: '', vocabulary: [] };
+                      setBaseline(structuredClone(draft));
+                      setEditing(draft);
+                    })
+                  }
+                >
+                  Add preset
+                </button>
+                <div class="category-library" role="group" aria-label="Workspace relation presets">
+                  {presets.map((preset) => (
+                    <button
+                      type="button"
+                      class="category-choice"
+                      key={preset.id}
+                      disabled={busy}
+                      aria-pressed={(editing?.id ?? selected?.id) === preset.id}
+                      onClick={() => leave(() => choose(preset))}
+                    >
+                      <strong>{preset.name}</strong>
+                      <span>{preset.vocabulary.map((kind) => kind.kind).join(' · ') || 'No relation kinds'}</span>
+                    </button>
+                  ))}
+                </div>
+              </section>
+              <section class="relation-preset-detail">
+                {editing ? (
+                  <form
+                    class="relation-vocabulary"
+                    onSubmit={async (event) => {
+                      event.preventDefault();
+                      if (busy) return;
+                      if (
+                        new Set(editing.vocabulary.map((kind) => kind.kind.trim())).size !== editing.vocabulary.length
+                      ) {
+                        setMessage('Give each relation kind a unique name.');
+                        return;
+                      }
+                      setBusy(true);
+                      const result = await requestJson<{ ok: boolean; preset: RelationPreset } | null>(
+                        'relationPresetWrite',
+                        '/api/canvas/knowledge/relation-preset',
+                        null,
+                        {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ preset: editing }),
+                        },
+                      );
+                      await refreshKnowledge();
+                      setBusy(false);
+                      if (result?.ok) choose(result.preset);
+                      setMessage(
+                        result?.ok
+                          ? 'Preset saved for the workspace. Existing boards are unchanged.'
+                          : 'Preset was not saved. Retry.',
+                      );
+                    }}
+                  >
+                    <h3>{selected ? 'Customize shared preset' : 'New shared preset'}</h3>
+                    <label>
+                      Name
+                      <input
+                        required
+                        pattern={'.*\\S.*'}
+                        maxLength={80}
+                        disabled={busy}
+                        value={editing.name}
+                        onInput={(event) => setEditing({ ...editing, name: event.currentTarget.value })}
+                      />
+                    </label>
+                    <p>Kinds stay open. Choose meaning ink and direction, not pin, agent or warning colours.</p>
+                    {editing.vocabulary.map((kind, index) => (
+                      <div class="vocabulary-row" key={index}>
+                        <input
+                          required
+                          pattern={'.*\\S.*'}
+                          aria-label={`Kind ${index + 1}`}
+                          maxLength={80}
+                          disabled={busy}
+                          value={kind.kind}
+                          onInput={(event) => changeKind(index, { kind: event.currentTarget.value })}
+                        />
+                        <select
+                          aria-label={`Ink ${index + 1}`}
+                          disabled={busy}
+                          value={kind.ink}
+                          onChange={(event) =>
+                            changeKind(index, { ink: event.currentTarget.value as RelationDefinition['ink'] })
+                          }
+                        >
+                          {['supports', 'contradicts', 'cites', 'derived', 'informs', 'related'].map((ink) => (
+                            <option key={ink}>{ink}</option>
+                          ))}
+                        </select>
+                        <label>
+                          <input
+                            type="checkbox"
+                            disabled={busy}
+                            checked={kind.directed}
+                            onChange={(event) => changeKind(index, { directed: event.currentTarget.checked })}
+                          />
+                          Arrow
+                        </label>
+                        <button
+                          type="button"
+                          aria-label={`Remove kind ${index + 1}`}
+                          disabled={busy}
+                          onClick={() =>
+                            setEditing({ ...editing, vocabulary: editing.vocabulary.filter((_, i) => i !== index) })
+                          }
+                        >
+                          ×
+                        </button>
+                      </div>
+                    ))}
+                    <button
+                      type="button"
+                      disabled={busy || editing.vocabulary.length >= 64}
+                      onClick={() =>
+                        setEditing({
+                          ...editing,
+                          vocabulary: [...editing.vocabulary, { kind: '', ink: 'related', directed: true }],
+                        })
+                      }
+                    >
+                      Add kind
+                    </button>
+                    <div class="relation-preset-footer">
+                      <button type="submit" disabled={busy}>
+                        Save preset
+                      </button>
+                      <button type="button" disabled={busy} onClick={() => leave(() => choose(selected))}>
+                        Cancel customization
+                      </button>
+                    </div>
+                  </form>
+                ) : existing ? (
+                  <>
+                    <h3>{existing.name}</h3>
+                    <p>Saved relations · read-only example</p>
+                    <p>
+                      Use on board replaces only the chosen board’s vocabulary. Matching connections use its ink and
+                      direction; connection records are not rewritten.
+                    </p>
+                    <ul class="relation-preset-preview" aria-label="Saved relation preview">
+                      {existing.vocabulary.map((kind) => (
+                        <li key={kind.kind} style={{ '--relation-ink': `var(--c-rel-${kind.ink})` }}>
+                          <strong>{kind.kind}</strong>
+                          <div class="relation-preset-example">
+                            <span>Example A</span>
+                            <svg viewBox="0 0 120 24" aria-hidden="true">
+                              <line
+                                x1="8"
+                                y1="12"
+                                x2="112"
+                                y2="12"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-dasharray={kind.ink === 'related' ? '3 5' : undefined}
+                              />
+                              {kind.directed && (
+                                <path
+                                  d="M 102 6 L 112 12 L 102 18"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  stroke-width="2"
+                                />
+                              )}
+                            </svg>
+                            <span>Example B</span>
+                          </div>
+                          <span>
+                            {kind.ink} · {kind.directed ? 'Directed: A → B' : 'Undirected: A — B'}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                    {!existing.vocabulary.length && (
+                      <p>No relation kinds. This empty preset can still be used on a board.</p>
+                    )}
+                    <div class="relation-preset-footer">
+                      {existing && (
+                        <>
+                          <label>
+                            Apply saved preset to board
+                            <select
+                              aria-label="Apply saved preset to board"
+                              disabled={busy}
+                              value={boardId}
+                              onChange={(event) => setBoardId(event.currentTarget.value)}
+                            >
+                              <option value="">Choose a board</option>
+                              {boardList.value.map((board) => (
+                                <option key={board.id} value={board.id}>
+                                  {board.name}
+                                </option>
+                              ))}
+                            </select>
+                          </label>
+                          <button
+                            type="button"
+                            class="relation-preset-use"
+                            disabled={busy || !boardId}
+                            onClick={async () => {
+                              if (busy || !boardId) return;
+                              setBusy(true);
+                              const saved = await updateBoard(boardId, { relationVocabulary: existing.vocabulary });
+                              setBusy(false);
+                              setMessage(
+                                saved
+                                  ? 'Preset applied. Connection records and other boards are unchanged.'
+                                  : 'Preset was not applied. Retry.',
+                              );
+                            }}
+                          >
+                            Use on board
+                          </button>
+                          <button
+                            type="button"
+                            disabled={busy}
+                            onClick={() => {
+                              setBaseline(structuredClone(existing));
+                              setEditing(structuredClone(existing));
+                              setConfirmDelete(false);
+                              setMessage('');
+                            }}
+                          >
+                            Customize preset
+                          </button>
+                          {confirmDelete ? (
+                            <div role="group" aria-label="Confirm preset deletion">
+                              <p>Delete {existing.name}? Boards that used it keep their existing vocabulary.</p>
+                              <button type="button" disabled={busy} onClick={() => setConfirmDelete(false)}>
+                                Cancel deletion
+                              </button>
+                              <button
+                                type="button"
+                                class="is-danger"
+                                disabled={busy}
+                                onClick={async () => {
+                                  if (busy) return;
+                                  setBusy(true);
+                                  const result = await requestJson<{ ok: boolean } | null>(
+                                    'relationPresetRemove',
+                                    `/api/canvas/knowledge/relation-preset/${encodeURIComponent(existing.id)}`,
+                                    null,
+                                    { method: 'DELETE' },
+                                  );
+                                  await refreshKnowledge();
+                                  setBusy(false);
+                                  setConfirmDelete(false);
+                                  if (result?.ok) choose(null);
+                                  setMessage(
+                                    result?.ok
+                                      ? 'Preset deleted. Existing boards are unchanged.'
+                                      : 'Preset was not deleted. Retry.',
+                                  );
+                                }}
+                              >
+                                Confirm deletion
+                              </button>
+                            </div>
+                          ) : (
+                            <button
+                              type="button"
+                              class="is-danger"
+                              disabled={busy}
+                              onClick={() => setConfirmDelete(true)}
+                            >
+                              Delete preset
+                            </button>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </>
+                ) : (
+                  <p>Choose a saved preset or add a new one.</p>
+                )}
+              </section>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/RelationsPanel.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'preact/hooks';
+import { memoryKey, type MemoryGraph } from '../../shared/memory-graph.js';
+import { relationDefinition, relationSourceEnd } from '../../shared/relations.js';
+import { activeBoardId, boardList, openMemoryTarget } from '../state/boards-store';
+import { edges, nodes } from '../state/canvas-store';
+import { requestJson } from '../state/intent-bridge';
+
+/** The expanded card's evidence and uses, from the same graph agents navigate. */
+export function RelationsPanel({ nodeId }: { nodeId: string }) {
+  const boardId = activeBoardId.value;
+  const [graph, setGraph] = useState<MemoryGraph | null>(null);
+  const [unavailable, setUnavailable] = useState(false);
+  const currentEdges = edges.value;
+  const currentNodes = nodes.value;
+  const catalog = boardList.value;
+  useEffect(() => {
+    let cancelled = false;
+    setGraph(null);
+    setUnavailable(false);
+    if (boardId)
+      void requestJson<MemoryGraph | null>(
+        'relations',
+        `/api/canvas/memory-graph?focus=${encodeURIComponent(memoryKey({ boardId, cardId: nodeId }))}&depth=1`,
+        null,
+      ).then((result) => {
+        if (!cancelled) {
+          setGraph(result);
+          setUnavailable(!result);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [boardId, nodeId, currentEdges, currentNodes, catalog]);
+  const key = boardId ? memoryKey({ boardId, cardId: nodeId }) : '';
+  const relations =
+    graph?.edges.filter((edge) => edge.kind !== 'member' && (edge.from === key || edge.to === key)) ?? [];
+  const group = (edge: (typeof relations)[number]) => {
+    const incoming = edge.to === key;
+    if (incoming && edge.relationKind === 'supports') return 'Evidence for';
+    if (incoming && edge.relationKind === 'contradicts') return 'Evidence against';
+    const source = relationSourceEnd({ kind: edge.relationKind, type: edge.type });
+    if (source) return (source === 'from' ? !incoming : incoming) ? 'Used by' : 'Sources';
+    if (edge.relationKind === 'cites' || edge.type === 'references') return incoming ? 'Used by' : 'Sources';
+    if (!incoming && edge.relationKind === 'supports') return 'Used by';
+    return 'Connections';
+  };
+  const groups = ['Evidence for', 'Evidence against', 'Sources', 'Used by', 'Connections'];
+  relations.sort((a, b) => groups.indexOf(group(a)) - groups.indexOf(group(b)));
+  return (
+    <aside class="relations-panel" aria-label="Relations">
+      <h3>Relations</h3>
+      {!graph && <p role="status">{unavailable ? 'Relations unavailable. Reopen to retry.' : 'Loading relations…'}</p>}
+      {graph && relations.length === 0 && <p>No connections yet.</p>}
+      {relations.map((edge, index) => {
+        const outgoing = edge.from === key;
+        const target = outgoing ? edge.target : edge.source;
+        const other = graph?.nodes.find((item) => item.key === memoryKey(target));
+        const owner = catalog.find((board) => board.id === edge.source.boardId);
+        const definition = relationDefinition({ kind: edge.relationKind, type: edge.type }, owner?.relationVocabulary);
+        return (
+          <div class="relation-row" key={edge.id}>
+            {(index === 0 || group(relations[index - 1]) !== group(edge)) && <h4>{group(edge)}</h4>}
+            <span class="relation-kind" style={{ color: `var(--c-rel-${definition.ink})` }}>
+              {outgoing ? '→' : '←'} {edge.relationKind ?? edge.type ?? edge.kind}
+            </span>
+            {edge.missing ? (
+              <span>Missing target</span>
+            ) : (
+              <button type="button" class="relation-target" onClick={() => void openMemoryTarget(target)}>
+                {other?.title ?? target.boardId}
+              </button>
+            )}
+            {edge.label && <span>{edge.label}</span>}
+            <p>{edge.reason ?? 'No reason recorded.'}</p>
+          </div>
+        );
+      })}
+      <p>Manage shared relation presets in Home.</p>
+    </aside>
+  );
+}

package/src/client/canvas/SelectionBar.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from 'preact/hooks';
 import { IconArrange, IconClose } from '../icons';
-import { attentionHistoryOpen } from '../state/attention-store';
 import {
   addContextPins,
   alignSelection,
@@ -13,6 +12,7 @@ import {
 import { createEdgeFromClient, createGroupFromClient, removeNodeFromClient } from '../state/intent-bridge';
 import { sessionActive } from '../state/presence-store';
 import { BarHint } from './BarHint';
+import { useChromeHeight } from './use-chrome-height';
 
 /**
  * Floating bottom-center bar for a multi-selection (rail-chrome-v2 phase 7,
@@ -22,6 +22,7 @@ import { BarHint } from './BarHint';
  */
 export function SelectionBar() {
   const count = selectedNodeIds.value.size;
+  const barRef = useChromeHeight('--selection-bar-height');
 
   const handlePinContext = useCallback(() => {
     const ids = Array.from(selectedNodeIds.value);
@@ -57,12 +58,8 @@ export function SelectionBar() {
 
   if (count === 0) return null;
   const many = count >= 2;
-  // The quiet board's pin bar shares the bottom-center slot (same rule as
-  // `ContextPinBar`'s own visibility) — sit above it rather than under it.
-  const abovePinBar = !sessionActive.value && contextPinnedNodeIds.value.size > 0 && !attentionHistoryOpen.value;
-
   return (
-    <div class={`selection-bar${abovePinBar ? ' is-above-pin-bar' : ''}`} role="toolbar" aria-label="Selection">
+    <div class="selection-bar" role="toolbar" aria-label="Selection" ref={barRef}>
       <span class="selection-bar-count">
         {count} node{count !== 1 ? 's' : ''} selected
       </span>