kempo-ui 0.4.6 → 0.4.8

package/docs-src/components/markdown.page.html

@@ -0,0 +1,161 @@
+<page pageName="Markdown" title="Markdown - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m pl">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#valueAttr">Value Attribute</a><br />
+          <a href="#breaks">Line Breaks</a><br />
+          <a href="#tagFiltering">Tag Filtering</a><br />
+          <a href="#dynamic">Updating At Runtime</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <p>The <code>k-markdown</code> component takes its child text content (or a <code>value</code> attribute), parses it as markdown using <a href="https://marked.js.org" target="_blank">marked</a> (full CommonMark + GFM &mdash; tables, task lists, fenced code, autolinks, inline HTML), runs the result through <a href="{{pathToRoot}}utils/sanitizeHtml.html"><code>sanitizeHtml</code></a>, and renders the HTML in place. It renders to the light DOM so page-level typography styles cascade naturally into headings, paragraphs, tables, and so on.</p>
+    <p>Common leading whitespace is automatically stripped from the source so you can indent the markdown to match the surrounding HTML without breaking parsing.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Drop markdown text inside the tag and it will be replaced with the rendered HTML when the element connects.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span>&gt;</span><br>  # Hello World<br><br>  This is **bold** and *italic* text.<br><br>  - list item 1<br>  - list item 2<br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown>
+            # Hello World
+
+            This is **bold** and *italic* text.
+
+            - list item 1
+            - list item 2
+          </k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="valueAttr"><a href="#valueAttr" class="no-link">Value Attribute</a></h3>
+    <p>Skip the children and pass markdown directly via the <code>value</code> attribute when you only need a single line. The attribute also takes precedence over child content if both are provided.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;Visit [Kempo UI](https://github.com/dustinpoissant/kempo-ui) for more.&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown value="Visit [Kempo UI](https://github.com/dustinpoissant/kempo-ui) for more."></k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="breaks"><a href="#breaks" class="no-link">Line Breaks</a></h3>
+    <p>By default, single newlines are joined into a paragraph (CommonMark behavior). Add the <code>breaks</code> attribute to convert single newlines to <code>&lt;br&gt;</code> &mdash; the Slack/iMessage convention &mdash; useful for chat-style content.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">breaks</span>&gt;</span><br>  Line one<br>  Line two<br>  Line three<br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown breaks>
+            Line one
+            Line two
+            Line three
+          </k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="tagFiltering"><a href="#tagFiltering" class="no-link">Tag Filtering</a></h3>
+    <p>The rendered HTML is sanitized with the same <code>allowed-tags</code> / <code>disallowed-tags</code> controls used by <a href="{{pathToRoot}}components/markdown-editor.html"><code>k-markdown-editor</code></a>. Pass a comma-separated allowlist (or <code>*</code> for everything), or a comma-separated denylist &mdash; the two are mutually exclusive. <code>&lt;script&gt;</code>, <code>&lt;iframe&gt;</code>, <code>&lt;style&gt;</code>, and similar tags are always stripped unless you opt in with <code>scripts-enabled</code> (which only restores <code>&lt;script&gt;</code>).</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">&quot;p,strong,em,a&quot;</span>&gt;</span><br>  Only **bold**, *italic*, [links](https://example.com), and paragraphs are kept.<br><br>  # This heading will be unwrapped<br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown allowed-tags="p,strong,em,a">
+            Only **bold**, *italic*, [links](https://example.com), and paragraphs are kept.
+
+            # This heading will be unwrapped
+          </k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dynamic"><a href="#dynamic" class="no-link">Updating At Runtime</a></h3>
+    <p>Set the <code>value</code> property in JavaScript to re-render with new markdown.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dynamicMd&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;Click the button.&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dynamicMdBtn&quot;</span>&gt;</span>Update<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">const</span> md = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;dynamicMd&#x27;</span>);<br>  <span class="hljs-keyword">const</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;dynamicMdBtn&#x27;</span>);<br>  <span class="hljs-keyword">let</span> toggled = <span class="hljs-literal">false</span>;<br>  btn.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">() =&gt;</span> {<br>    toggled = !toggled;<br>    md.<span class="hljs-property">value</span> = toggled<br>      ? <span class="hljs-string">&#x27;## Updated!\n\nThis was set via JavaScript with **markdown** and a [link](https://example.com).&#x27;</span><br>      : <span class="hljs-string">&#x27;Click the button.&#x27;</span>;<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown id="dynamicMd" value="Click the button."></k-markdown>
+          <button id="dynamicMdBtn" class="btn primary mt">Update</button>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends LightComponent</h6>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="{{pathToRoot}}components/light-component.html">LightComponent</a></li>
+      <li><code>marked</code> (vendored at <code>src/utils/marked.esm.js</code>) via <a href="{{pathToRoot}}utils/renderMarkdown.js"><code>renderMarkdown</code></a></li>
+      <li><a href="{{pathToRoot}}utils/sanitizeHtml.html"><code>sanitizeHtml</code></a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>value<i>: string</i></code></h5>
+    <p>The markdown source. If empty when the element connects, the component falls back to the dedented child text content. Setting this property at runtime re-renders the output.</p>
+    <h5><code>breaks<i>: boolean</i></code></h5>
+    <p>When <code>true</code>, single newlines convert to <code>&lt;br&gt;</code> instead of being joined into a paragraph. Defaults to <code>false</code>. Reflects to the <code>breaks</code> attribute.</p>
+    <h5><code>allowedTags<i>: string</i></code></h5>
+    <p>Comma-separated allowlist for the rendered HTML. Pass <code>*</code> to allow every tag. Mutually exclusive with <code>disallowedTags</code> &mdash; if both are set, <code>allowedTags</code> wins and a console warning is logged. Reflects to the <code>allowed-tags</code> attribute.</p>
+    <h5><code>disallowedTags<i>: string</i></code></h5>
+    <p>Comma-separated denylist &mdash; everything is allowed except the listed tags. Reflects to the <code>disallowed-tags</code> attribute.</p>
+    <h5><code>scriptsEnabled<i>: boolean</i></code></h5>
+    <p>When present, <code>&lt;script&gt;</code> tags survive sanitization (provided they also pass the allow/deny tag check). Defaults to off so script content can never reach the DOM. Reflects to the <code>scripts-enabled</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>renderedHtml<i>: string</i></code> (getter)</h5>
+    <p>Returns the sanitized HTML string that was rendered &mdash; useful for copying the output or feeding it into another component.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Markdown.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module">
+      const md = document.getElementById('dynamicMd');
+      const btn = document.getElementById('dynamicMdBtn');
+      let toggled = false;
+      btn.addEventListener('click', () => {
+        toggled = !toggled;
+        md.value = toggled
+          ? '## Updated!\n\nThis was set via JavaScript with **markdown** and a [link](https://example.com).'
+          : 'Click the button.';
+      });
+    </script>
+  </content>
+</page>

package/docs-src/index.page.html

@@ -125,6 +125,12 @@
           <p class="tc-muted">WYSIWYG editor with formatting tools and dual editing modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/markdown.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Markdown</h3>
+          <p class="tc-muted">Renders the markdown text inside the element as sanitized HTML in place.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/markdown-editor.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Markdown Editor</h3>

package/docs-src/nav.fragment.html

@@ -82,6 +82,9 @@
           <k-filter-item filter-keywords="html editor components"><a
               href="{{pathToRoot}}components/html-editor.html">HTML
               Editor<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="markdown render parser marked gfm components"><a
+              href="{{pathToRoot}}components/markdown.html"
+            >Markdown<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="markdown editor markdowneditor write preview marked gfm tables components"><a
               href="{{pathToRoot}}components/markdown-editor.html"
             >Markdown Editor<br><small>Component</small></a></k-filter-item>
@@ -292,6 +295,7 @@
         <a href="{{pathToRoot}}components/filter-list.html">Filter List</a>
         <a href="{{pathToRoot}}components/focus-capture.html">FocusCapture</a>
         <a href="{{pathToRoot}}components/html-editor.html">HTML Editor</a>
+        <a href="{{pathToRoot}}components/markdown.html">Markdown</a>
         <a href="{{pathToRoot}}components/markdown-editor.html">Markdown Editor</a>
         <a href="{{pathToRoot}}components/icon.html">Icon</a>
         <a href="{{pathToRoot}}components/import.html">Import</a>

package/llms.txt

@@ -67,6 +67,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-filter-list>` `<k-filter-item>` | `FilterList.js` `FilterItem.js` | Filter/search list; items have `filter` attribute with keywords | [filter-list.html](https://dustinpoissant.github.io/kempo-ui/components/filter-list.html) |
 | `<k-focus-capture>` | `FocusCapture.js` | Traps keyboard focus within children | [focus-capture.html](https://dustinpoissant.github.io/kempo-ui/components/focus-capture.html) |
 | `<k-html-editor>` | `HtmlEditor.js` | WYSIWYG rich text editor; `value` property; `controls` attribute (`full`/`normal`/`minimal`/`none`) for built-in toolbars; `disabled`/`readonly`/`required` (Lexical's `setEditable()` + Monaco's `readOnly`); form-associated | [html-editor.html](https://dustinpoissant.github.io/kempo-ui/components/html-editor.html) |
+| `<k-markdown>` | `Markdown.js` | Renders child markdown text as sanitized HTML in place; `value` attribute (overrides children); `breaks` (single newline → `<br>`); `allowed-tags`/`disallowed-tags`/`scripts-enabled` for sanitization; light DOM render; `renderedHtml` getter | [markdown.html](https://dustinpoissant.github.io/kempo-ui/components/markdown.html) |
 | `<k-markdown-editor>` | `MarkdownEditor.js` | Markdown editor with Write/Preview tabs; raw markdown is the form value; rendered with vendored `marked` (full CommonMark + GFM — tables, task lists, fenced code, autolinks, inline HTML) via `renderMarkdown.js`; then sanitized via `sanitizeHtml` using either `allowed-tags` (comma-separated allowlist; pass `*` for everything) OR `disallowed-tags` (denylist) — mutually exclusive, allowlist wins if both set; defaults cover standard markdown output incl. img/hr/table family; `<script>` is always stripped unless `scripts-enabled` attribute is set; iframe/style/etc. are always stripped; `value`, `name`, `placeholder`, `disabled`/`readonly`/`required`, `mode` (`write`/`preview`), `allowed-tags`, `controls` (`'minimal'`/`'normal'`/`'full'`/`'none'` — pre-built toolbar; auto-imports the relevant control modules; user-slotted children override the preset); methods `focus()`, `blur()`, `clear()`, `setMode()`, `togglePreview()`, plus selection helpers `getSelection()`, `replaceSelection()`, `wrapSelection()`, `insertAtCursor()`, `insertLinePrefix()`; `controls-top`/`controls-bottom` slots for toolbar buttons; built-in controls under `markdownEditorControls/` (`k-md-bold`, `k-md-italic`, `k-md-strikethrough` (`~~...~~`), `k-md-heading` w/ `level`, `k-md-code`, `k-md-link`, `k-md-image` w/ `popup` (opens a Dropdown by default — `popup="dialog"` to switch to modal Dialog — for URL + alt text), `k-md-table` (small Dropdown with cols × rows inputs + Create button, inserts a GFM markdown table), `k-md-menu` w/ `label` (toolbar button that opens a Dropdown of slotted child controls; `trigger` slot fully customizes the button content — defaults to a `menu` icon), `k-md-format-block` w/ `tag` (heading picker designed to live inside `k-md-menu` — `h1`-`h6`), `k-md-speech-to-text` w/ `language`/`continuous` (wraps `<k-speech-to-text>`; final transcript is inserted at the cursor when the user stops speaking), `k-md-bullet-list`, `k-md-numbered-list`, `k-md-quote`); extend `MarkdownEditorControl` for custom buttons (incl. ones that insert raw HTML — adjust `allowed-tags` accordingly); fires `input`, `change`, `mode-change` | [markdown-editor.html](https://dustinpoissant.github.io/kempo-ui/components/markdown-editor.html) |
 | `<k-icon>` | `Icon.js` | SVG icon; `name` (looked up in `pathsToIcons`) or `src` (direct URL); `rotation`, `direction`, `animation` attributes | [icon.html](https://dustinpoissant.github.io/kempo-ui/components/icon.html) |
 | `<k-import>` | `Import.js` | Includes external HTML fragments; `src` attribute | [import.html](https://dustinpoissant.github.io/kempo-ui/components/import.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Markdown.js

@@ -0,0 +1,125 @@
+import { html, unsafeHTML } from '../lit-all.min.js';
+import LightComponent from './LightComponent.js';
+import renderMarkdown from '../utils/renderMarkdown.js';
+import sanitizeHtml, { STRIP_COMPLETELY } from '../utils/sanitizeHtml.js';
+
+/*
+  k-markdown
+
+  Reads markdown from its child text content (or the `value` attribute) and
+  renders the HTML equivalent in-place. Markdown is parsed with the vendored
+  `marked` (CommonMark + GFM) and the resulting HTML is run through
+  `sanitizeHtml` before being inserted, with the same allowed-tags /
+  disallowed-tags / scripts-enabled controls as MarkdownEditor's preview.
+
+  Renders to the light DOM so page-level typography and styles cascade into
+  headings, paragraphs, tables, etc. without extra wiring.
+*/
+
+export default class Markdown extends LightComponent {
+  static properties = {
+    value: { type: String },
+    breaks: { type: Boolean, reflect: true },
+    allowedTags: { type: String, reflect: true, attribute: 'allowed-tags' },
+    disallowedTags: { type: String, reflect: true, attribute: 'disallowed-tags' },
+    scriptsEnabled: { type: Boolean, reflect: true, attribute: 'scripts-enabled' }
+  };
+
+  #captured = false;
+
+  /*
+    Lifecycle Callbacks
+  */
+  constructor() {
+    super();
+    this.value = '';
+    this.breaks = false;
+    this.allowedTags = '';
+    this.disallowedTags = '';
+    this.scriptsEnabled = false;
+  }
+
+  connectedCallback() {
+    // Capture and clear the original markdown children BEFORE Lit appends
+    // its lightRoot div — once super runs, lightRoot lives among the
+    // siblings we'd otherwise scan. After capture, the markdown lives on
+    // the `value` property; the source nodes are dropped so the parsed
+    // HTML doesn't render alongside its raw source.
+    if(!this.#captured){
+      this.#captured = true;
+      const text = this.textContent || '';
+      const dedented = dedent(text);
+      while(this.firstChild) this.removeChild(this.firstChild);
+      if(!this.hasAttribute('value') && !this.value && dedented){
+        this.value = dedented;
+      }
+    }
+    super.connectedCallback();
+  }
+
+  /*
+    Public Methods
+  */
+  get renderedHtml() {
+    const opts = {};
+    const resolved = this.#resolvedAllowedTags;
+    if(resolved) opts.allowedTags = resolved;
+    if(this.scriptsEnabled){
+      const stripCompletely = new Set(STRIP_COMPLETELY);
+      stripCompletely.delete('SCRIPT');
+      opts.stripCompletely = stripCompletely;
+    }
+    return sanitizeHtml(renderMarkdown(this.value || '', { breaks: this.breaks }), opts);
+  }
+
+  /*
+    Utility
+  */
+  get #resolvedAllowedTags() {
+    const allow = (this.allowedTags || '').trim();
+    const deny = (this.disallowedTags || '').trim();
+    if(allow && deny){
+      console.warn('[k-markdown] `allowed-tags` and `disallowed-tags` are mutually exclusive; using `allowed-tags`.');
+    }
+    if(allow){
+      if(allow === '*') return { has: () => true };
+      return new Set(allow.split(',').map(t => t.trim().toUpperCase()).filter(Boolean));
+    }
+    if(deny){
+      const denySet = new Set(deny.split(',').map(t => t.trim().toUpperCase()).filter(Boolean));
+      return { has: (tag) => !denySet.has(tag) };
+    }
+    return null;
+  }
+
+  /*
+    Rendering
+  */
+  renderLightDom() {
+    if(!this.value) return html``;
+    return html`${unsafeHTML(this.renderedHtml)}`;
+  }
+}
+
+/*
+  Strip a common leading indent from every line so users can indent the
+  markdown source to match the surrounding HTML without breaking parsing.
+  Also trims fully-blank leading/trailing lines.
+*/
+const dedent = (text) => {
+  const lines = text.split('\n');
+  while(lines.length && lines[0].trim() === '') lines.shift();
+  while(lines.length && lines[lines.length - 1].trim() === '') lines.pop();
+  if(!lines.length) return '';
+  let minIndent = Infinity;
+  for(const line of lines){
+    if(line.trim().length === 0) continue;
+    const match = line.match(/^(\s*)/);
+    const indent = match ? match[1].length : 0;
+    if(indent < minIndent) minIndent = indent;
+  }
+  if(minIndent === Infinity) minIndent = 0;
+  return lines.map(l => l.slice(minIndent)).join('\n');
+};
+
+customElements.define('k-markdown', Markdown);

package/src/components/Timestamp.js

@@ -4,14 +4,14 @@ import formatTimestamp from '../utils/formatTimestamp.js';
 
 export default class Timestamp extends ShadowComponent {
   static properties = {
-    timestamp: { type: Number, reflect: true },
+    timestamp: { type: String, reflect: true },
     format: { type: String, reflect: true },
     locale: { type: String, reflect: true }
   };
 
   constructor() {
     super();
-    this.timestamp = 0;
+    this.timestamp = '';
     this.format = '';
     this.locale = '';
   }
@@ -20,7 +20,7 @@ export default class Timestamp extends ShadowComponent {
     Rendering Logic
   */
   render() {
-    const formattedTime = this.timestamp 
+    const formattedTime = this.timestamp
       ? formatTimestamp(this.timestamp, this.format, this.locale || navigator.language)
       : '';
       

package/src/utils/formatTimestamp.js

@@ -1,5 +1,6 @@
 export default (timestamp, format, forceLocale) => {
-  const date = new Date(parseInt(timestamp));
+  const ms = isNaN(timestamp) ? Date.parse(timestamp) : parseInt(timestamp);
+  const date = new Date(ms);
   if (format) {
     const pad = (num, size) => ('000' + num).slice(size * -1);
     const tokens = {