image-to-pixel 3.0.0 → 3.1.0

package/lib/editor/controls.js

@@ -1,139 +1,139 @@
-// Inspector controls. Each returns { el, set(value) } so the inspector can sync from state
-// without rebuilding (which would steal focus mid-drag).
-
-import { h, nextId } from './dom.js';
-import { icon } from './icons.js';
-
-/**
- * Collapsible inspector section: a header button (works the same in every browser, unlike
- * <details>) plus an optional reset icon that appears when the section differs from its defaults.
- * @param {string} title
- * @param {{ open?: boolean, onToggle?: (open: boolean) => void, onReset?: () => void, resetLabel?: string }} opts
- */
-export function section(title, opts = {}, ...children) {
-  const id = nextId('sec');
-  const hintEl = h('span.hint', {});
-  const toggle = h('button.itp-sec-toggle', { type: 'button', 'aria-controls': id },
-    h('span.title', { text: title }), hintEl, h('span.chev', { html: icon('chevron') }));
-  const reset = opts.onReset ? h('button.itp-btn.small.icon.itp-sec-reset', {
-    type: 'button', hidden: true, title: opts.resetLabel || `Reset ${title.toLowerCase()}`, 'aria-label': opts.resetLabel || `Reset ${title.toLowerCase()} to defaults`,
-    html: icon('reset'), onclick: () => opts.onReset(),
-  }) : null;
-  const body = h('div.body', { id }, ...children);
-  const el = h('section.itp-sec', {}, h('div.itp-sec-head', {}, toggle, reset), body);
-  const setOpen = open => {
-    el.dataset.open = String(open);
-    toggle.setAttribute('aria-expanded', String(open));
-    body.hidden = !open;
-  };
-  toggle.addEventListener('click', () => { const open = el.dataset.open !== 'true'; setOpen(open); opts.onToggle?.(open); });
-  setOpen(opts.open !== false);
-  return {
-    el, body,
-    setHint(t) { hintEl.textContent = t; },
-    /** Show the reset icon when the section's settings differ from the defaults. */
-    setChanged(changed) { if (reset) reset.hidden = !changed; },
-    setOpen,
-    get open() { return el.dataset.open === 'true'; },
-  };
-}
-
-/** Labelled field wrapper. */
-export function field(label, control, { help = '', value = null, id } = {}) {
-  const lab = h('div.lab', {}, h('label', { for: id || control.id || null, text: label }), value);
-  return h('div.itp-field', {}, lab, control, help ? h('div.help', { text: help }) : null);
-}
-
-/**
- * Slider + number box.
- * @param {{ label: string, min: number, max: number, step?: number, value: number, unit?: string,
- *           scale?: number, help?: string, onInput: (v:number)=>void, onCommit?: ()=>void }} o
- *   scale: display multiplier (0..1 shown as 0..100 with scale 100)
- */
-export function slider(o) {
-  const id = nextId('sl');
-  const k = o.scale || 1;
-  const step = o.step || 1;
-  const range = h('input', { type: 'range', id, min: o.min * k, max: o.max * k, step: step * k, 'aria-label': o.label });
-  const num = h('input.itp-input', { type: 'number', min: o.min * k, max: o.max * k, step: step * k, 'aria-label': `${o.label} value` });
-  const paint = () => { const p = (range.value - range.min) / (range.max - range.min) * 100; range.style.setProperty('--p', `${p}%`); };
-  const set = v => { const d = round(v * k, step * k); range.value = d; num.value = d; paint(); };
-  range.addEventListener('input', () => { num.value = range.value; paint(); o.onInput(Number(range.value) / k); });
-  range.addEventListener('change', () => o.onCommit && o.onCommit());
-  num.addEventListener('change', () => {
-    const v = Math.min(o.max * k, Math.max(o.min * k, Number(num.value) || 0));
-    set(v / k); o.onInput(v / k); o.onCommit && o.onCommit();
-  });
-  range.addEventListener('dblclick', () => { if (o.reset != null) { set(o.reset); o.onInput(o.reset); o.onCommit && o.onCommit(); } });
-  set(o.value);
-  const el = field(o.label, h('div.itp-slider', {}, range, num), { help: o.help, id });
-  return { el, set, input: range };
-}
-
-const round = (v, step) => {
-  const d = Math.max(0, -Math.floor(Math.log10(step) + 1e-9));
-  return Number((Math.round(v / step) * step).toFixed(d));
-};
-
-/** <select> with options [{ value, label, group? }]. */
-export function select(o) {
-  const id = nextId('se');
-  const el = h('select.itp-select', { id, 'aria-label': o.label });
-  const groups = new Map();
-  for (const opt of o.options) {
-    const node = h('option', { value: opt.value, text: opt.label });
-    if (opt.group) {
-      if (!groups.has(opt.group)) { const g = h('optgroup', { label: opt.group }); groups.set(opt.group, g); el.append(g); }
-      groups.get(opt.group).append(node);
-    } else el.append(node);
-  }
-  el.addEventListener('change', () => o.onChange(el.value));
-  const wrapped = o.bare ? el : field(o.label, el, { help: o.help, id });
-  return { el: wrapped, select: el, set(v) { el.value = v; } };
-}
-
-/** Segmented toggle [{ value, label, icon?, title? }]. */
-export function segmented(o) {
-  const btns = o.options.map(opt => h('button', {
-    type: 'button', 'aria-pressed': 'false', title: opt.title || null,
-    html: (opt.icon ? icon(opt.icon) : '') + (opt.label ? `<span>${opt.label}</span>` : ''),
-    onclick: () => o.onChange(opt.value),
-  }));
-  const seg = h('div.itp-seg', { role: 'group', 'aria-label': o.label }, ...btns);
-  const set = v => btns.forEach((b, i) => b.setAttribute('aria-pressed', String(o.options[i].value === v)));
-  set(o.value);
-  const el = o.bare ? seg : field(o.label, seg, { help: o.help });
-  return { el, set };
-}
-
-/** On/off switch. */
-export function toggle(o) {
-  const input = h('input', { type: 'checkbox', role: 'switch' });
-  input.addEventListener('change', () => o.onChange(input.checked));
-  const lab = h('label.itp-switch', {}, h('span', { text: o.label }), input);
-  const el = o.help ? h('div.itp-field', {}, lab, h('div.help', { text: o.help })) : lab;
-  return { el, set(v) { input.checked = !!v; } };
-}
-
-/** Colour input with hex readout. */
-export function colorInput(o) {
-  const input = h('input', { type: 'color', 'aria-label': o.label });
-  const hex = h('span.mono', {});
-  input.addEventListener('input', () => { hex.textContent = input.value; o.onChange(input.value); });
-  const box = h('label.itp-color', {}, input, hex);
-  const set = v => { input.value = v; hex.textContent = v; };
-  set(o.value || '#000000');
-  return { el: o.bare ? box : field(o.label, box), set };
-}
-
-/** Number box (no slider). */
-export function numberInput(o) {
-  const id = nextId('nu');
-  const input = h('input.itp-input.num', { type: 'number', id, min: o.min, max: o.max, step: o.step || 1, 'aria-label': o.label });
-  input.addEventListener('change', () => {
-    const v = Math.min(o.max, Math.max(o.min, Number(input.value) || o.min));
-    if (input.value !== '' || !input.placeholder) input.value = v;
-    o.onChange(v);
-  });
-  return { el: o.bare ? input : field(o.label, input, { help: o.help, id }), input, set(v) { input.value = v; } };
-}
+// Inspector controls. Each returns { el, set(value) } so the inspector can sync from state
+// without rebuilding (which would steal focus mid-drag).
+
+import { h, nextId } from './dom.js';
+import { icon } from './icons.js';
+
+/**
+ * Collapsible inspector section: a header button (works the same in every browser, unlike
+ * <details>) plus an optional reset icon that appears when the section differs from its defaults.
+ * @param {string} title
+ * @param {{ open?: boolean, onToggle?: (open: boolean) => void, onReset?: () => void, resetLabel?: string }} opts
+ */
+export function section(title, opts = {}, ...children) {
+  const id = nextId('sec');
+  const hintEl = h('span.hint', {});
+  const toggle = h('button.itp-sec-toggle', { type: 'button', 'aria-controls': id },
+    h('span.title', { text: title }), hintEl, h('span.chev', { html: icon('chevron') }));
+  const reset = opts.onReset ? h('button.itp-btn.small.icon.itp-sec-reset', {
+    type: 'button', hidden: true, title: opts.resetLabel || `Reset ${title.toLowerCase()}`, 'aria-label': opts.resetLabel || `Reset ${title.toLowerCase()} to defaults`,
+    html: icon('reset'), onclick: () => opts.onReset(),
+  }) : null;
+  const body = h('div.body', { id }, ...children);
+  const el = h('section.itp-sec', {}, h('div.itp-sec-head', {}, toggle, reset), body);
+  const setOpen = open => {
+    el.dataset.open = String(open);
+    toggle.setAttribute('aria-expanded', String(open));
+    body.hidden = !open;
+  };
+  toggle.addEventListener('click', () => { const open = el.dataset.open !== 'true'; setOpen(open); opts.onToggle?.(open); });
+  setOpen(opts.open !== false);
+  return {
+    el, body,
+    setHint(t) { hintEl.textContent = t; },
+    /** Show the reset icon when the section's settings differ from the defaults. */
+    setChanged(changed) { if (reset) reset.hidden = !changed; },
+    setOpen,
+    get open() { return el.dataset.open === 'true'; },
+  };
+}
+
+/** Labelled field wrapper. */
+export function field(label, control, { help = '', value = null, id } = {}) {
+  const lab = h('div.lab', {}, h('label', { for: id || control.id || null, text: label }), value);
+  return h('div.itp-field', {}, lab, control, help ? h('div.help', { text: help }) : null);
+}
+
+/**
+ * Slider + number box.
+ * @param {{ label: string, min: number, max: number, step?: number, value: number, unit?: string,
+ *           scale?: number, help?: string, onInput: (v:number)=>void, onCommit?: ()=>void }} o
+ *   scale: display multiplier (0..1 shown as 0..100 with scale 100)
+ */
+export function slider(o) {
+  const id = nextId('sl');
+  const k = o.scale || 1;
+  const step = o.step || 1;
+  const range = h('input', { type: 'range', id, min: o.min * k, max: o.max * k, step: step * k, 'aria-label': o.label });
+  const num = h('input.itp-input', { type: 'number', min: o.min * k, max: o.max * k, step: step * k, 'aria-label': `${o.label} value` });
+  const paint = () => { const p = (range.value - range.min) / (range.max - range.min) * 100; range.style.setProperty('--p', `${p}%`); };
+  const set = v => { const d = round(v * k, step * k); range.value = d; num.value = d; paint(); };
+  range.addEventListener('input', () => { num.value = range.value; paint(); o.onInput(Number(range.value) / k); });
+  range.addEventListener('change', () => o.onCommit && o.onCommit());
+  num.addEventListener('change', () => {
+    const v = Math.min(o.max * k, Math.max(o.min * k, Number(num.value) || 0));
+    set(v / k); o.onInput(v / k); o.onCommit && o.onCommit();
+  });
+  range.addEventListener('dblclick', () => { if (o.reset != null) { set(o.reset); o.onInput(o.reset); o.onCommit && o.onCommit(); } });
+  set(o.value);
+  const el = field(o.label, h('div.itp-slider', {}, range, num), { help: o.help, id });
+  return { el, set, input: range };
+}
+
+const round = (v, step) => {
+  const d = Math.max(0, -Math.floor(Math.log10(step) + 1e-9));
+  return Number((Math.round(v / step) * step).toFixed(d));
+};
+
+/** <select> with options [{ value, label, group? }]. */
+export function select(o) {
+  const id = nextId('se');
+  const el = h('select.itp-select', { id, 'aria-label': o.label });
+  const groups = new Map();
+  for (const opt of o.options) {
+    const node = h('option', { value: opt.value, text: opt.label });
+    if (opt.group) {
+      if (!groups.has(opt.group)) { const g = h('optgroup', { label: opt.group }); groups.set(opt.group, g); el.append(g); }
+      groups.get(opt.group).append(node);
+    } else el.append(node);
+  }
+  el.addEventListener('change', () => o.onChange(el.value));
+  const wrapped = o.bare ? el : field(o.label, el, { help: o.help, id });
+  return { el: wrapped, select: el, set(v) { el.value = v; } };
+}
+
+/** Segmented toggle [{ value, label, icon?, title? }]. */
+export function segmented(o) {
+  const btns = o.options.map(opt => h('button', {
+    type: 'button', 'aria-pressed': 'false', title: opt.title || null,
+    html: (opt.icon ? icon(opt.icon) : '') + (opt.label ? `<span>${opt.label}</span>` : ''),
+    onclick: () => o.onChange(opt.value),
+  }));
+  const seg = h('div.itp-seg', { role: 'group', 'aria-label': o.label }, ...btns);
+  const set = v => btns.forEach((b, i) => b.setAttribute('aria-pressed', String(o.options[i].value === v)));
+  set(o.value);
+  const el = o.bare ? seg : field(o.label, seg, { help: o.help });
+  return { el, set };
+}
+
+/** On/off switch. */
+export function toggle(o) {
+  const input = h('input', { type: 'checkbox', role: 'switch' });
+  input.addEventListener('change', () => o.onChange(input.checked));
+  const lab = h('label.itp-switch', {}, h('span', { text: o.label }), input);
+  const el = o.help ? h('div.itp-field', {}, lab, h('div.help', { text: o.help })) : lab;
+  return { el, set(v) { input.checked = !!v; } };
+}
+
+/** Colour input with hex readout. */
+export function colorInput(o) {
+  const input = h('input', { type: 'color', 'aria-label': o.label });
+  const hex = h('span.mono', {});
+  input.addEventListener('input', () => { hex.textContent = input.value; o.onChange(input.value); });
+  const box = h('label.itp-color', {}, input, hex);
+  const set = v => { input.value = v; hex.textContent = v; };
+  set(o.value || '#000000');
+  return { el: o.bare ? box : field(o.label, box), set };
+}
+
+/** Number box (no slider). */
+export function numberInput(o) {
+  const id = nextId('nu');
+  const input = h('input.itp-input.num', { type: 'number', id, min: o.min, max: o.max, step: o.step || 1, 'aria-label': o.label });
+  input.addEventListener('change', () => {
+    const v = Math.min(o.max, Math.max(o.min, Number(input.value) || o.min));
+    if (input.value !== '' || !input.placeholder) input.value = v;
+    o.onChange(v);
+  });
+  return { el: o.bare ? input : field(o.label, input, { help: o.help, id }), input, set(v) { input.value = v; } };
+}

package/lib/editor/dom.js

@@ -1,65 +1,65 @@
-// Tiny DOM helpers. No framework: the editor is small enough to wire by hand.
-
-/** Create an element: h('button.itp-btn.icon', { onclick, title }, child…) */
-export function h(tag, props = {}, ...children) {
-  const [name, ...classes] = tag.split('.');
-  const el = document.createElement(name || 'div');
-  if (classes.length) el.className = classes.join(' ');
-  for (const [k, v] of Object.entries(props || {})) {
-    if (v == null || v === false) continue;
-    if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2), v);
-    else if (k === 'html') el.innerHTML = v;
-    else if (k === 'text') el.textContent = v;
-    else if (k === 'style' && typeof v === 'object') Object.assign(el.style, v);
-    else if (k === 'dataset') Object.assign(el.dataset, v);
-    else if (k in el && typeof v !== 'string' && k !== 'list') el[k] = v;
-    else el.setAttribute(k, v === true ? '' : v);
-  }
-  append(el, children);
-  return el;
-}
-
-export function append(el, children) {
-  for (const c of children.flat(Infinity)) {
-    if (c == null || c === false) continue;
-    el.append(c instanceof Node ? c : document.createTextNode(String(c)));
-  }
-  return el;
-}
-
-/** Replace all children. */
-export function render(el, ...children) { el.replaceChildren(); return append(el, children); }
-
-export const $ = (sel, root = document) => root.querySelector(sel);
-
-/** Element from an HTML string (single root). */
-export function html(str) {
-  const t = document.createElement('template');
-  t.innerHTML = str.trim();
-  return t.content.firstElementChild;
-}
-
-export const esc = s => String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-
-let uid = 0;
-export const nextId = (p = 'itp') => `${p}-${++uid}`;
-
-/** Debounce helper. */
-export function debounce(fn, ms) {
-  let t;
-  return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
-}
-
-/** Read a File as text. */
-export const readText = file => file.text();
-
-/** Open a file picker and resolve with the chosen files. */
-export function pickFiles({ accept = '', multiple = false } = {}) {
-  return new Promise(res => {
-    const input = h('input', { type: 'file', accept, multiple, style: { display: 'none' } });
-    input.addEventListener('change', () => { res([...input.files]); input.remove(); });
-    input.addEventListener('cancel', () => { res([]); input.remove(); });
-    document.body.append(input);
-    input.click();
-  });
-}
+// Tiny DOM helpers. No framework: the editor is small enough to wire by hand.
+
+/** Create an element: h('button.itp-btn.icon', { onclick, title }, child…) */
+export function h(tag, props = {}, ...children) {
+  const [name, ...classes] = tag.split('.');
+  const el = document.createElement(name || 'div');
+  if (classes.length) el.className = classes.join(' ');
+  for (const [k, v] of Object.entries(props || {})) {
+    if (v == null || v === false) continue;
+    if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2), v);
+    else if (k === 'html') el.innerHTML = v;
+    else if (k === 'text') el.textContent = v;
+    else if (k === 'style' && typeof v === 'object') Object.assign(el.style, v);
+    else if (k === 'dataset') Object.assign(el.dataset, v);
+    else if (k in el && typeof v !== 'string' && k !== 'list') el[k] = v;
+    else el.setAttribute(k, v === true ? '' : v);
+  }
+  append(el, children);
+  return el;
+}
+
+export function append(el, children) {
+  for (const c of children.flat(Infinity)) {
+    if (c == null || c === false) continue;
+    el.append(c instanceof Node ? c : document.createTextNode(String(c)));
+  }
+  return el;
+}
+
+/** Replace all children. */
+export function render(el, ...children) { el.replaceChildren(); return append(el, children); }
+
+export const $ = (sel, root = document) => root.querySelector(sel);
+
+/** Element from an HTML string (single root). */
+export function html(str) {
+  const t = document.createElement('template');
+  t.innerHTML = str.trim();
+  return t.content.firstElementChild;
+}
+
+export const esc = s => String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+let uid = 0;
+export const nextId = (p = 'itp') => `${p}-${++uid}`;
+
+/** Debounce helper. */
+export function debounce(fn, ms) {
+  let t;
+  return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
+}
+
+/** Read a File as text. */
+export const readText = file => file.text();
+
+/** Open a file picker and resolve with the chosen files. */
+export function pickFiles({ accept = '', multiple = false } = {}) {
+  return new Promise(res => {
+    const input = h('input', { type: 'file', accept, multiple, style: { display: 'none' } });
+    input.addEventListener('change', () => { res([...input.files]); input.remove(); });
+    input.addEventListener('cancel', () => { res([]); input.remove(); });
+    document.body.append(input);
+    input.click();
+  });
+}

package/lib/editor/exporter.js

@@ -20,6 +20,23 @@ export function exportSize(s, r, item) {
 /** PNG options for one exported image. */
 const imageOpts = (s, r, item) => (s.export.size === 'source' && item ? { ...exportSize(s, r, item), indexed: s.export.indexed } : pngOpts(s));
 
+/**
+ * Whole-number scales to try for a video, best first. 'scale' = the PNG export scale; otherwise a target
+ * height ('1080', '720', '2160', measured on the short side), falling back to smaller sizes if the
+ * browser's encoder refuses the big one. Never below 240 px tall.
+ */
+export function videoScales(size, r, exportScale = 4) {
+  const min = Math.max(1, Math.ceil(240 / Math.min(r.width, r.height)));
+  const fit = target => {
+    const long = Math.round(target * 16 / 9), portrait = r.height > r.width;
+    const W = portrait ? target : long, H = portrait ? long : target;
+    return Math.max(min, Math.min(Math.floor(W / r.width), Math.floor(H / r.height)));
+  };
+  const first = size === 'scale' ? Math.max(min, exportScale) : fit(Number(size) || 1080);
+  const list = [first, fit(1080), fit(720), min].filter((v, i, a) => v <= first && a.indexOf(v) === i);
+  return list.sort((a, b) => b - a);
+}
+
 export function createExporter(app) {
   const S = () => app.store.settings;
 
@@ -139,15 +156,38 @@ export function createExporter(app) {
     }
     // MP4 / WebM through WebCodecs
     await task(`Encoding ${opts.format.toUpperCase()}`, async (signal, progress) => {
-      const { createVideoEncoder } = await import('../video.js');
+      const { createVideoEncoder, decodeAudio } = await import('../video.js');
+      // Keep audio: the video's own soundtrack, cut to the exported range (null when it has none)
+      const item = app.current;
+      let audio = null;
+      if (opts.audio && opts.source === 'video' && item && item.type === 'video' && item.file) {
+        progress(0, 'Reading audio');
+        const end = opts.end > opts.start ? opts.end : item.source.duration;
+        audio = await decodeAudio(item.file, { start: opts.start, end }).catch(e => { console.warn('[export] audio', e); return null; });
+      }
       let enc = null;
       await frames(opts, signal, progress, async r => {
-        enc ||= await createVideoEncoder({ format: opts.format, fps: opts.fps, width: r.width, height: r.height, scale: Math.max(s.export.scale, Math.ceil(240 / r.height)) });
+        if (!enc) {
+          // Players stretch small videos with smoothing, which blurs pixel art. So the frames are upscaled
+          // by a whole number to about the chosen size first (and H.264's colour subsampling stays inside each pixel).
+          let tries = videoScales(opts.videoSize, r, s.export.scale), err = null;
+          for (const scale of tries) {
+            try { enc = await createVideoEncoder({ format: opts.format, fps: opts.fps, width: r.width, height: r.height, scale, audio }); break; }
+            catch (e) { err = e; if (!/encoder available/.test(e.message)) throw e; }
+          }
+          if (!enc) throw err;
+        }
         await enc.add(r);
       });
+      if (audio && enc.audioCodec) progress(1, 'Encoding audio');
       const blob = await enc.finish();
       downloadBlob(blob, `${name}.${opts.format}`);
-      return `Saved ${opts.format.toUpperCase()} (${(blob.size / 1024 / 1024).toFixed(1)} MB)`;
+      const sound = !opts.audio || opts.source !== 'video' ? ''
+        : enc.audioCodec === 'opus' && opts.format === 'mp4' ? ', with Opus audio: VLC and browsers play it, Windows Media Player and QuickTime may not'
+        : enc.audioCodec ? ', with audio'
+        : audio ? ", without audio (this browser can't encode it)"
+        : ', no audio track in the source';
+      return `Saved ${opts.format.toUpperCase()} (${(blob.size / 1024 / 1024).toFixed(1)} MB${sound})`;
     });
   }
 

package/lib/editor/icons.js

@@ -29,6 +29,10 @@ const P = {
   pause: '<path d="M8.5 5.5v13M15.5 5.5v13"/>',
   stepBack: '<path d="M7 5.5v13M18 6l-8 6 8 6V6Z"/>',
   stepForward: '<path d="M17 5.5v13M6 6l8 6-8 6V6Z"/>',
+  save: '<path d="M5 4.5h11l3.5 3.5v10A1.5 1.5 0 0 1 18 19.5H6A1.5 1.5 0 0 1 4.5 18V6A1.5 1.5 0 0 1 6 4.5Z"/><path d="M8 4.5v4h7v-4M8 19.5v-6h8v6"/>',
+  rename: '<path d="M4 20h4L19 9l-4-4L4 16v4Z"/><path d="m13.5 6.5 4 4"/>',
+  volume: '<path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5M18 7a7 7 0 0 1 0 10"/>',
+  volumeOff: '<path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z"/><path d="m16 9.5 5 5M21 9.5l-5 5"/>',
   trash: '<path d="M4.5 7h15M9.5 7V5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.5 7l1 12a1.5 1.5 0 0 0 1.5 1.4h6a1.5 1.5 0 0 0 1.5-1.4l1-12"/>',
   link: '<path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/>',
   braces: '<path d="M8.5 4.5H8A2 2 0 0 0 6 6.5v3A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5v3a2 2 0 0 0 2 2h.5M15.5 4.5h.5a2 2 0 0 1 2 2v3a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5v3a2 2 0 0 1-2 2h-.5"/>',