@plures/design-dojo 0.5.2 → 0.7.1

package/dist/primitives/MarkdownEditor.svelte

@@ -0,0 +1,781 @@
+<!--
+  MarkdownEditor — Simple embeddable markdown editor control.
+
+  Features:
+  - GUI mode: resizable textarea with optional live preview panel
+  - TUI mode: box-drawing border multi-line text area
+  - Monospace font option for code-heavy content
+  - Preview toggle: "edit" | "preview" | "split"
+  - Keyboard shortcuts: Ctrl+B bold, Ctrl+I italic, Ctrl+` inline code
+  - Safe built-in markdown renderer (HTML-escaped, no external deps)
+  - Value binding ($bindable), placeholder, label
+  - Disabled state
+  - Events: onchange
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+  import type { MarkdownEditorMode } from "./MarkdownEditor.types.js";
+
+  interface Props {
+    tui?: boolean;
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    /** Use monospace font in editor area (good for code/snippets). */
+    monospace?: boolean;
+    /** Show/hide the preview toggle toolbar. Default: true */
+    showToolbar?: boolean;
+    /** Active view mode. Default: "edit" */
+    mode?: MarkdownEditorMode;
+    disabled?: boolean;
+    /** Minimum rows for the textarea. Default: 6 */
+    rows?: number;
+    class?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    tui = false,
+    value = $bindable(""),
+    placeholder = "",
+    label = "",
+    monospace = false,
+    showToolbar = true,
+    mode = $bindable<MarkdownEditorMode>("edit"),
+    disabled = false,
+    rows = 6,
+    class: className = "",
+    onchange,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  let textareaEl: HTMLTextAreaElement | undefined = $state();
+  let isFocused = $state(false);
+
+  // Stable id for associating the <label> with the <textarea>
+  const editorId = `md-editor-${Math.random().toString(36).slice(2, 9)}`;
+
+  // TUI cannot render a split view; coerce "split" → "edit" when in TUI mode
+  $effect(() => {
+    if (isTui && mode === "split") {
+      mode = "edit";
+    }
+  });
+
+  // ── Markdown renderer ────────────────────────────────────────────────────────
+
+  /** Escape HTML entities to prevent XSS before injecting markdown HTML. */
+  function escapeHtml(str: string): string {
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  /**
+   * Decode a minimal set of HTML entities, including numeric ones, so that
+   * obfuscated protocols like "javascript&#58;" are normalized before checks.
+   */
+  function decodeHtmlEntities(str: string): string {
+    // First handle the common named entities we use elsewhere.
+    let result = str
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'");
+
+    // Then handle numeric (decimal and hex) character references.
+    result = result.replace(/&#(x?[0-9a-fA-F]+);?/g, (match, num) => {
+      try {
+        const codePoint =
+          typeof num === "string" && num.toLowerCase().startsWith("x")
+            ? parseInt(num.slice(1), 16)
+            : parseInt(num, 10);
+        if (!Number.isFinite(codePoint) || codePoint <= 0) {
+          return match;
+        }
+        return String.fromCodePoint(codePoint);
+      } catch {
+        return match;
+      }
+    });
+
+    return result;
+  }
+
+  /** Allow only safe URL protocols; return empty string for dangerous ones. */
+  function sanitizeHref(href: string): string {
+    const trimmed = href.trim();
+    if (trimmed === "") {
+      return "";
+    }
+
+    const decoded = decodeHtmlEntities(trimmed);
+
+    // Allow fragment-only links like "#section".
+    if (decoded.startsWith("#")) {
+      return decoded;
+    }
+
+    const allowedSchemes = new Set(["http", "https", "mailto"]);
+
+    try {
+      // Use a benign base so relative URLs can still be parsed.
+      const url = new URL(decoded, "http://example.com");
+      const protocol = url.protocol.replace(":", "").toLowerCase();
+
+      // If the URL has an explicit protocol, enforce the allow-list.
+      if (protocol && protocol !== "http") {
+        // If a non-http(s)/mailto protocol is present, only allow if explicitly whitelisted.
+        return allowedSchemes.has(protocol) ? decoded : "";
+      }
+
+      // For http/https (including relative URLs resolved against the base), allow.
+      return decoded;
+    } catch {
+      // If parsing fails but the string looks like it starts with a scheme,
+      // reject it; otherwise treat it as a relative URL and allow.
+      if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(decoded)) {
+        return "";
+      }
+      return decoded;
+    }
+  }
+
+  /** Returns true when a line should not be accumulated into a paragraph. */
+  function isSpecialMarkdownLine(line: string): boolean {
+    return (
+      line.trim() === "" ||
+      line.startsWith("#") ||
+      line.startsWith("```") ||
+      /^[ \t]*[-*+] /.test(line) ||
+      /^[ \t]*\d+\. /.test(line) ||
+      /^[-*_]{3,}$/.test(line.trim())
+    );
+  }
+
+  /**
+   * Minimal safe markdown renderer.
+   * Processes: headings, bold, italic, inline code, code blocks,
+   * unordered lists, ordered lists, horizontal rules, links, paragraphs.
+   * All user content is HTML-escaped before formatting is applied.
+   */
+  function renderMarkdown(src: string): string {
+    if (!src) return "";
+
+    const lines = src.split("\n");
+    const output: string[] = [];
+    let i = 0;
+
+    while (i < lines.length) {
+      const line = lines[i];
+
+      // Fenced code block
+      if (line.startsWith("```")) {
+        const lang = escapeHtml(line.slice(3).trim());
+        const codeLines: string[] = [];
+        i++;
+        while (i < lines.length && !lines[i].startsWith("```")) {
+          codeLines.push(escapeHtml(lines[i]));
+          i++;
+        }
+        const langAttr = lang ? ` class="language-${lang}"` : "";
+        output.push(`<pre><code${langAttr}>${codeLines.join("\n")}</code></pre>`);
+        i++; // skip closing ```
+        continue;
+      }
+
+      // Unordered list
+      if (/^[ \t]*[-*+] /.test(line)) {
+        const items: string[] = [];
+        while (i < lines.length && /^[ \t]*[-*+] /.test(lines[i])) {
+          items.push(`<li>${inlineMarkdown(lines[i].replace(/^[ \t]*[-*+] /, ""))}</li>`);
+          i++;
+        }
+        output.push(`<ul>${items.join("")}</ul>`);
+        continue;
+      }
+
+      // Ordered list
+      if (/^[ \t]*\d+\. /.test(line)) {
+        const items: string[] = [];
+        while (i < lines.length && /^[ \t]*\d+\. /.test(lines[i])) {
+          items.push(`<li>${inlineMarkdown(lines[i].replace(/^[ \t]*\d+\. /, ""))}</li>`);
+          i++;
+        }
+        output.push(`<ol>${items.join("")}</ol>`);
+        continue;
+      }
+
+      // Horizontal rule
+      if (/^[-*_]{3,}$/.test(line.trim())) {
+        output.push("<hr>");
+        i++;
+        continue;
+      }
+
+      // ATX headings
+      const headingMatch = line.match(/^(#{1,6}) (.*)/);
+      if (headingMatch) {
+        const level = headingMatch[1].length;
+        output.push(`<h${level}>${inlineMarkdown(headingMatch[2])}</h${level}>`);
+        i++;
+        continue;
+      }
+
+      // Blank line → paragraph break
+      if (line.trim() === "") {
+        output.push("");
+        i++;
+        continue;
+      }
+
+      // Paragraph: collect consecutive non-blank lines
+      const paraLines: string[] = [];
+      while (i < lines.length && !isSpecialMarkdownLine(lines[i])) {
+        paraLines.push(lines[i]);
+        i++;
+      }
+      if (paraLines.length) {
+        output.push(`<p>${inlineMarkdown(paraLines.join(" "))}</p>`);
+      }
+    }
+
+    return output.join("\n");
+  }
+
+  /** Apply inline markdown formatting to an already HTML-safe string. */
+  function inlineMarkdown(raw: string): string {
+    // Escape HTML first
+    let s = escapeHtml(raw);
+    // Inline code (must run before bold/italic to protect backtick content)
+    s = s.replace(/`([^`]+)`/g, "<code>$1</code>");
+    // Bold
+    s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+    s = s.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+    // Italic
+    s = s.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+    s = s.replace(/_([^_]+)_/g, "<em>$1</em>");
+    // Links — href sanitized to block javascript:/vbscript:/data: URLs
+    // text is already HTML-escaped (part of `s`); use it directly to avoid double-escaping.
+    // safe href is escaped again for attribute safety (prevents quote-injection XSS).
+    s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, href) => {
+      const safe = sanitizeHref(href);
+      if (!safe) return text;
+      return `<a href="${escapeHtml(safe)}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+    });
+    return s;
+  }
+
+  const previewHtml = $derived(renderMarkdown(value ?? ""));
+
+  // ── Keyboard shortcuts ───────────────────────────────────────────────────────
+
+  function wrapSelection(before: string, after: string) {
+    const el = textareaEl;
+    if (!el || disabled) return;
+    const start = el.selectionStart ?? 0;
+    const end = el.selectionEnd ?? 0;
+    const selected = (value ?? "").slice(start, end);
+    const newValue =
+      (value ?? "").slice(0, start) +
+      before +
+      selected +
+      after +
+      (value ?? "").slice(end);
+    value = newValue;
+    onchange?.(newValue);
+    // Restore selection inside the inserted markers
+    requestAnimationFrame(() => {
+      el.selectionStart = start + before.length;
+      el.selectionEnd = end + before.length;
+      el.focus();
+    });
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    const ctrl = e.ctrlKey || e.metaKey;
+    if (ctrl && e.key === "b") {
+      e.preventDefault();
+      wrapSelection("**", "**");
+    } else if (ctrl && e.key === "i") {
+      e.preventDefault();
+      wrapSelection("*", "*");
+    } else if (ctrl && e.key === "`") {
+      e.preventDefault();
+      wrapSelection("`", "`");
+    }
+  }
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    value = target.value;
+    onchange?.(value);
+  }
+
+  // ── TUI helpers ──────────────────────────────────────────────────────────────
+
+  const isVisuallyFocused = $derived(isFocused);
+
+  const tuiTopBorder = $derived(
+    label
+      ? (() => {
+          const maxLabelLen = 30;
+          const safeLabel = label.length > maxLabelLen ? label.substring(0, maxLabelLen) : label;
+          const section = `─ ${safeLabel} `;
+          const fill = Math.max(0, 38 - section.length);
+          return `┌${section}${"─".repeat(fill)}┐`;
+        })()
+      : `┌${"─".repeat(38)}┐`,
+  );
+
+  const tuiBottomBorder = `└${"─".repeat(38)}┘`;
+
+  const tuiModeIndicator = $derived(
+    isTui && showToolbar
+      ? ` [${mode === "preview" ? "PREV" : "EDIT"}]`
+      : "",
+  );
+</script>
+
+{#if isTui}
+  <!-- TUI mode: box-drawing border around a real textarea -->
+  <div
+    class="tui-md {className}"
+    class:focused={isVisuallyFocused}
+    class:disabled
+  >
+    <div class="tui-top" class:focused={isVisuallyFocused}>{tuiTopBorder}{tuiModeIndicator}</div>
+
+    {#if mode !== "preview"}
+      <div class="tui-row">
+        <span class="tui-side" class:focused={isVisuallyFocused}>│</span>
+        <textarea
+          bind:this={textareaEl}
+          class="tui-textarea"
+          class:monospace
+          {rows}
+          {disabled}
+          {value}
+          aria-label={label || placeholder || "Markdown editor"}
+          aria-multiline="true"
+          oninput={handleInput}
+          onkeydown={handleKeydown}
+          onfocus={() => (isFocused = true)}
+          onblur={() => (isFocused = false)}
+        ></textarea>
+        <span class="tui-side" class:focused={isVisuallyFocused}>│</span>
+      </div>
+    {/if}
+
+    {#if mode === "preview"}
+      <!-- TUI preview intentionally shows raw markdown text; HTML cannot be rendered in terminal environments -->
+      <div class="tui-row">
+        <span class="tui-side" class:focused={isVisuallyFocused}>│</span>
+        <div class="tui-preview" aria-label="Markdown preview">
+          {value ? value.split("\n").slice(0, rows).join("\n") : (placeholder || "No content")}
+        </div>
+        <span class="tui-side" class:focused={isVisuallyFocused}>│</span>
+      </div>
+    {/if}
+
+    <div class="tui-bottom" class:focused={isVisuallyFocused}>{tuiBottomBorder}</div>
+
+    {#if showToolbar}
+      <div class="tui-toolbar">
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <span
+          role="button"
+          tabindex={disabled ? -1 : 0}
+          class="tui-tab"
+          class:active={mode === "edit"}
+          onclick={() => { mode = "edit"; }}
+          onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") mode = "edit"; }}
+          aria-pressed={mode === "edit"}
+        >EDIT</span>
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <span
+          role="button"
+          tabindex={disabled ? -1 : 0}
+          class="tui-tab"
+          class:active={mode === "preview"}
+          onclick={() => { mode = "preview"; }}
+          onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") mode = "preview"; }}
+          aria-pressed={mode === "preview"}
+        >PREV</span>
+      </div>
+    {/if}
+  </div>
+{:else}
+  <!-- GUI mode -->
+  <div
+    class="md-editor {className}"
+    class:focused={isVisuallyFocused}
+    class:disabled
+    class:split={mode === "split"}
+  >
+    {#if label}
+      <label class="md-label" for={editorId}>{label}</label>
+    {/if}
+
+    {#if showToolbar}
+      <div class="md-toolbar" role="toolbar" aria-label="Editor mode">
+        <button
+          class="md-tab"
+          class:active={mode === "edit"}
+          type="button"
+          {disabled}
+          onclick={() => (mode = "edit")}
+          aria-pressed={mode === "edit"}
+        >Edit</button>
+        <button
+          class="md-tab"
+          class:active={mode === "split"}
+          type="button"
+          {disabled}
+          onclick={() => (mode = "split")}
+          aria-pressed={mode === "split"}
+        >Split</button>
+        <button
+          class="md-tab"
+          class:active={mode === "preview"}
+          type="button"
+          {disabled}
+          onclick={() => (mode = "preview")}
+          aria-pressed={mode === "preview"}
+        >Preview</button>
+
+        <span class="md-toolbar-hint" aria-label="Keyboard shortcuts: Ctrl+B bold, Ctrl+I italic, Ctrl+backtick code">Ctrl+B bold · Ctrl+I italic · Ctrl+` code</span>
+      </div>
+    {/if}
+
+    <div class="md-body" class:split={mode === "split"}>
+      {#if mode !== "preview"}
+        <textarea
+          bind:this={textareaEl}
+          id={editorId}
+          class="md-textarea"
+          class:monospace
+          {rows}
+          {disabled}
+          {placeholder}
+          aria-label={label ? undefined : "Markdown editor"}
+          aria-multiline="true"
+          value={value}
+          oninput={handleInput}
+          onkeydown={handleKeydown}
+          onfocus={() => (isFocused = true)}
+          onblur={() => (isFocused = false)}
+        ></textarea>
+      {/if}
+
+      {#if mode !== "edit"}
+        <div
+          class="md-preview"
+          class:full={mode === "preview"}
+          aria-label="Markdown preview"
+          aria-live="polite"
+        >
+          {#if value}
+            <!-- renderMarkdown HTML-escapes all user input before injecting markdown tags -->
+            {@html previewHtml}
+          {:else}
+            <span class="md-preview-empty">{placeholder || "Nothing to preview"}</span>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* ===== GUI mode ===== */
+  .md-editor {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    background: var(--surface-2, #1e1e1e);
+    overflow: hidden;
+    transition: border-color 0.15s ease;
+  }
+
+  .md-editor.focused {
+    border-color: var(--color-accent, #6366f1);
+  }
+
+  .md-editor.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .md-label {
+    padding: var(--space-2, 8px) var(--space-3, 12px) 0;
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text-muted, #888888);
+  }
+
+  .md-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    padding: var(--space-1, 4px) var(--space-2, 8px);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    background: var(--surface-1, #161616);
+  }
+
+  .md-tab {
+    padding: 2px var(--space-2, 8px);
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm, 6px);
+    color: var(--color-text-muted, #888888);
+    font-size: var(--text-xs, 12px);
+    cursor: pointer;
+    transition: color 0.1s, border-color 0.1s, background 0.1s;
+  }
+
+  .md-tab:hover {
+    color: var(--color-text, #e8e8e8);
+    background: var(--surface-2, #1e1e1e);
+  }
+
+  .md-tab.active {
+    color: var(--color-accent, #6366f1);
+    border-color: var(--color-accent, #6366f1);
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
+  }
+
+  .md-toolbar-hint {
+    margin-left: auto;
+    font-size: 10px;
+    color: var(--color-text-muted, #888888);
+    opacity: 0.6;
+    white-space: nowrap;
+  }
+
+  .md-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .md-body.split {
+    gap: 0;
+  }
+
+  .md-textarea {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-3, 12px);
+    background: transparent;
+    border: none;
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    line-height: var(--leading-normal, 1.6);
+    resize: vertical;
+    outline: none;
+  }
+
+  .md-textarea.monospace {
+    font-family: var(--font-mono, monospace);
+  }
+
+  .md-body.split .md-textarea {
+    flex: 1;
+    resize: none;
+    border-right: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  .md-preview {
+    flex: 1;
+    padding: var(--space-3, 12px);
+    color: var(--color-text, #e8e8e8);
+    font-size: var(--text-sm, 14px);
+    line-height: var(--leading-normal, 1.6);
+    overflow-y: auto;
+  }
+
+  .md-preview.full {
+    min-height: 120px;
+  }
+
+  .md-preview-empty {
+    color: var(--color-text-muted, #888888);
+    font-style: italic;
+  }
+
+  /* Preview typography */
+  .md-preview :global(h1),
+  .md-preview :global(h2),
+  .md-preview :global(h3),
+  .md-preview :global(h4),
+  .md-preview :global(h5),
+  .md-preview :global(h6) {
+    margin: 0.6em 0 0.3em;
+    color: var(--color-text, #e8e8e8);
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  .md-preview :global(h1) { font-size: 1.5em; }
+  .md-preview :global(h2) { font-size: 1.25em; }
+  .md-preview :global(h3) { font-size: 1.1em; }
+
+  .md-preview :global(p) {
+    margin: 0.4em 0;
+  }
+
+  .md-preview :global(strong) {
+    font-weight: 700;
+    color: var(--color-text, #e8e8e8);
+  }
+
+  .md-preview :global(em) {
+    font-style: italic;
+  }
+
+  .md-preview :global(code) {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.875em;
+    padding: 0.15em 0.35em;
+    background: var(--surface-1, #161616);
+    border-radius: var(--radius-sm, 4px);
+    color: var(--color-accent, #6366f1);
+  }
+
+  .md-preview :global(pre) {
+    background: var(--surface-1, #161616);
+    border-radius: var(--radius-sm, 6px);
+    padding: var(--space-3, 12px);
+    overflow-x: auto;
+    margin: 0.5em 0;
+  }
+
+  .md-preview :global(pre code) {
+    background: transparent;
+    padding: 0;
+    font-size: 0.85em;
+    color: var(--color-text, #e8e8e8);
+  }
+
+  .md-preview :global(ul),
+  .md-preview :global(ol) {
+    margin: 0.4em 0;
+    padding-left: 1.5em;
+  }
+
+  .md-preview :global(li) {
+    margin: 0.2em 0;
+  }
+
+  .md-preview :global(hr) {
+    border: none;
+    border-top: 1px solid var(--color-border, #2a2a2a);
+    margin: 0.8em 0;
+  }
+
+  .md-preview :global(a) {
+    color: var(--color-accent, #6366f1);
+    text-decoration: underline;
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-md {
+    display: inline-flex;
+    flex-direction: column;
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    line-height: 1.4;
+    color: var(--tui-text, #e0e0e0);
+    background: var(--tui-surface, #16213e);
+  }
+
+  .tui-md.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .tui-top,
+  .tui-bottom {
+    color: var(--tui-border, #0f3460);
+    white-space: pre;
+    user-select: none;
+  }
+
+  .tui-top.focused,
+  .tui-bottom.focused {
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-row {
+    display: flex;
+    white-space: pre;
+  }
+
+  .tui-side {
+    color: var(--tui-border, #0f3460);
+    user-select: none;
+  }
+
+  .tui-side.focused {
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-textarea {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--tui-text, #e0e0e0);
+    font-family: var(--font-mono, monospace);
+    font-size: inherit;
+    line-height: 1.4;
+    resize: none;
+    width: 36ch;
+    padding: 0;
+  }
+
+  .tui-preview {
+    flex: 1;
+    width: 36ch;
+    padding: 0;
+    color: var(--tui-text, #e0e0e0);
+    font-family: var(--font-mono, monospace);
+    font-size: inherit;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    overflow: hidden;
+  }
+
+  .tui-toolbar {
+    display: flex;
+    gap: 4px;
+    padding: 2px 0;
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+  }
+
+  .tui-tab {
+    color: var(--tui-text-dim, #888888);
+    cursor: pointer;
+    user-select: none;
+    padding: 0 4px;
+  }
+
+  .tui-tab.active {
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-tab:focus-visible {
+    outline: 1px solid var(--tui-accent, #00d4ff);
+  }
+</style>