securemark 0.298.0 → 0.298.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.298.1
+
+- Refactoring.
+
 ## 0.298.0
 
 - Refactoring.

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! securemark v0.298.0 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
+/*! securemark v0.298.1 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("Prism"), require("DOMPurify"));
@@ -4518,6 +4518,7 @@ function parse(source, options = {}, context) {
     host: options.host ?? context?.host ?? new url_1.ReadonlyURL(location.pathname, location.origin),
     url: url ? new url_1.ReadonlyURL(url) : context?.url,
     id: options.id ?? context?.id,
+    local: options.local ?? context?.local,
     caches: context?.caches,
     resources: context?.resources
   });
@@ -4713,7 +4714,8 @@ const markdown = (0, combinator_1.lazy)(() => (0, combinator_1.fmap)((0, combina
     class: 'references'
   });
   const document = (0, parse_1.parse)(source, {
-    id: '',
+    local: true,
+    id: context.id === '' ? '' : (0, util_1.randomID)(),
     notes: {
       references
     }
@@ -4867,7 +4869,8 @@ exports.aside = (0, combinator_1.block)((0, combinator_1.recursion)(0 /* Recursi
     class: 'references'
   });
   const document = (0, parse_1.parse)(body.slice(0, -1), {
-    id: '',
+    local: true,
+    id: context.id === '' ? '' : (0, util_1.randomID)(),
     notes: {
       references
     }
@@ -4918,7 +4921,8 @@ exports.example = (0, combinator_1.block)((0, combinator_1.recursion)(0 /* Recur
           class: 'references'
         });
         const document = (0, parse_1.parse)(body.slice(0, -1), {
-          id: '',
+          local: true,
+          id: context.id === '' ? '' : (0, util_1.randomID)(),
           notes: {
             references
           }
@@ -6014,8 +6018,9 @@ class Context extends parser_1.Context {
     this.recursion = new RecursionCounter('annotation', 2);
     const {
       segment,
-      buffer,
+      local,
       sequential,
+      buffer,
       header,
       host,
       url,
@@ -6023,8 +6028,9 @@ class Context extends parser_1.Context {
       caches
     } = options;
     this.segment = segment ?? 0 /* Segment.unknown */;
-    this.buffer = buffer ?? new parser_1.List();
+    this.local = local ?? false;
     this.sequential = sequential ?? false;
+    this.buffer = buffer ?? new parser_1.List();
     this.header = header ?? true;
     this.host = host;
     this.url = url;
@@ -7069,18 +7075,20 @@ const combinator_1 = __webpack_require__(3484);
 const dom_1 = __webpack_require__(394);
 function indexee(parser) {
   return (0, combinator_1.fmap)(parser, (ns, {
-    id
+    id,
+    local
   }) => ns.length === 1 ? new parser_1.List([new parser_1.Node((0, dom_1.define)(ns.head.value, {
     id: identity('index', id, ns.head.value),
+    class: local ? `${ns.head.value.className} local`.trimStart() : undefined,
     'data-index': null
   }))]) : ns);
 }
 exports.indexee = indexee;
-const MAX = 60;
+const table = [...[...Array(36)].map((_, i) => i.toString(36)), ...[...Array(36)].map((_, i) => i.toString(36).toUpperCase()).slice(-26), '-', '='].join('');
+const MAX = 64 - '='.length - Math.ceil(Math.log(~0 >>> 0) / Math.log(table.length));
 const ELLIPSIS = '...';
 const PART = (MAX - ELLIPSIS.length) / 2 | 0;
 const REM = MAX - PART * 2 - ELLIPSIS.length;
-const table = [...[...Array(36)].map((_, i) => i.toString(36)), ...[...Array(36)].map((_, i) => i.toString(36).toUpperCase()).slice(-26), '-', '='].join('');
 function identity(type, id, text) {
   if (id === '') return undefined;
   if (typeof text !== 'string') {
@@ -7112,7 +7120,9 @@ function hash(source) {
   }
   return baseR(x >>> 0, 62);
 }
+
 // 62も64も最大6桁
+
 function baseR(n, r) {
   let acc = '';
   do {
@@ -8137,7 +8147,7 @@ const array_1 = __webpack_require__(6876);
 const dom_1 = __webpack_require__(394);
 const query_1 = __webpack_require__(2282);
 function* figure(target, notes, opts = {}) {
-  const refs = new queue_1.MultiQueue((0, array_1.push)((0, query_1.querySelectorAll)(target, 'a.label:not(.disabled)[data-label]'), notes && (0, query_1.querySelectorAll)(notes.references, 'a.label:not(.disabled)') || []).map(el => [el.getAttribute('data-label'), el]));
+  const refs = new queue_1.MultiQueue((0, array_1.push)((0, query_1.querySelectorAll)(target, 'a.label:not(.local)[data-label]'), notes && (0, query_1.querySelectorAll)(notes.references, 'a.label:not(.local)') || []).map(el => [el.getAttribute('data-label'), el]));
   const labels = new Set();
   const numbers = new Map();
   const scope = target instanceof Element ? ':scope > ' : '';
@@ -8219,10 +8229,9 @@ function* figure(target, notes, opts = {}) {
         (0, util_1.unmarkInvalid)(ref);
       }
       if (ref.hash.slice(1) === def.id && ref.innerText === figindex) continue;
-      yield (0, dom_1.define)(ref, opts.id !== '' ? {
-        href: `#${def.id}`
-      } : {
-        class: `${ref.className} disabled`
+      yield (0, dom_1.define)(ref, {
+        class: opts.local ? `${ref.className} local` : undefined,
+        href: opts.id !== '' ? `#${def.id}` : undefined
       }, figindex);
     }
   }
@@ -8289,8 +8298,8 @@ function* note(target, notes, opts = {}, bottom = null) {
 exports.note = note;
 const annotationRefsMemoryCaller = (0, memoize_1.memoize)(target => new Map() ?? target, new WeakMap());
 const referenceRefsMemoryCaller = (0, memoize_1.memoize)(target => new Map() ?? target, new WeakMap());
-const annotation = build('annotation', 'annotations', '.annotation:not(:is(.annotations, .references) .annotation, .disabled)', n => `*${n}`, 'h1, h2, h3, h4, h5, h6, aside.aside, hr');
-const reference = build('reference', 'references', '.reference:not(:is(.annotations, .references) .reference, .disabled)', (n, abbr) => `[${abbr || n}]`);
+const annotation = build('annotation', 'annotations', '.annotation:not(:is(.annotations, .references) .annotation, .local)', n => `*${n}`, 'h1, h2, h3, h4, h5, h6, aside.aside, hr');
+const reference = build('reference', 'references', '.reference:not(:is(.annotations, .references) .reference, .local)', (n, abbr) => `[${abbr || n}]`);
 function build(syntax, list, query, marker, splitter = '') {
   splitter &&= `${splitter}, .${list}`;
   return function* (memory, target, note, opts = {}, bottom = null) {
@@ -8364,7 +8373,7 @@ function build(syntax, list, query, marker, splitter = '') {
       const title = info.title ||= text;
       (0, dom_1.define)(ref, {
         id: refId,
-        class: opts.id !== '' ? undefined : void ref.classList.add('disabled'),
+        class: opts.local ? `${ref.className} local` : undefined,
         title
       }, []);
       if (title && info.queue.length > 0) {
@@ -9046,10 +9055,11 @@ exports.unescsource = unescsource;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.stringify = exports.unmarkInvalid = exports.markInvalid = exports.invalid = exports.repeat = exports.unwrap = void 0;
+exports.randomID = exports.stringify = exports.unmarkInvalid = exports.markInvalid = exports.invalid = exports.repeat = exports.unwrap = void 0;
 const parser_1 = __webpack_require__(605);
 const delimiter_1 = __webpack_require__(385);
 const alias_1 = __webpack_require__(5413);
+const random_1 = __webpack_require__(3158);
 const dom_1 = __webpack_require__(394);
 function* unwrap(nodes) {
   if (nodes === undefined) return;
@@ -9167,6 +9177,10 @@ function stringify(nodes) {
   return acc;
 }
 exports.stringify = stringify;
+function randomID() {
+  return `random-${(0, random_1.rnd0Z)(6)}`;
+}
+exports.randomID = randomID;
 
 /***/ },
 
@@ -9868,7 +9882,7 @@ Object.defineProperty(exports, "__esModule", ({
 exports.toc = void 0;
 const array_1 = __webpack_require__(6876);
 const dom_1 = __webpack_require__(394);
-const selector = ':is(h1, h2, h3, h4, h5, h6, aside.aside)[id]';
+const selector = ':is(h1, h2, h3, h4, h5, h6, aside.aside)[id]:not(.local)';
 function toc(source) {
   const hs = [];
   for (let es = source.querySelectorAll(selector), len = es.length, i = 0; i < len; ++i) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "securemark",
-  "version": "0.298.0",
+  "version": "0.298.1",
   "description": "Secure markdown renderer working on browsers for user input data.",
   "private": false,
   "homepage": "https://github.com/falsandtru/securemark",

package/src/debug.test.ts

@@ -43,6 +43,6 @@ export function inspect(parser: Parser<DocumentFragment | HTMLElement | string>,
 // Bug: Firefox
 export function normalize(html: string): string {
   return html
-    .replace(/(data-number="[\w.]+") (hidden="")/g, '$2 $1')
-    .replace(/(data-type="[\w-]+") (type="\w+")/g, '$2 $1');
+    .replace(/:random-\w+:/g, ':random:')
+    .replace(/ data-invalid-\w+="[^"]*"/g, '');
 }

package/src/parser/api/parse.test.ts

@@ -1,6 +1,7 @@
 import { parse } from './parse';
 import { Context } from '../context';
 import { html } from 'typed-dom/dom';
+import { normalize } from '../../debug.test';
 
 describe('Unit: parser/api/parse', () => {
   describe('parse', () => {
@@ -201,10 +202,10 @@ describe('Unit: parser/api/parse', () => {
             '~~~',
           ].join('\n'),
           '{#}',
-        ].join('\n\n'), { host: new URL(`${location.origin}/z`) }).children].map(el => el.outerHTML),
+        ].join('\n\n'), { host: new URL(`${location.origin}/z`) }).children].map(el => normalize(el.outerHTML)),
         [
           `<aside class="header"><details open=""><summary>Header</summary><span class="field" data-name="url" data-value="https://example/x"><span class="field-name">URL</span>: <span class="field-value">https://example/x</span>\n</span></details></aside>`,
-          '<pre class="invalid" translate="no" data-invalid-syntax="header" data-invalid-type="syntax" data-invalid-message="Invalid syntax">---\nURL: https://example/y\n---\n</pre>',
+          '<pre class="invalid" translate="no">---\nURL: https://example/y\n---\n</pre>',
           '<aside class="example" data-type="markdown"><pre translate="no">---\nURL: https://example/y\n---\n\n{#}</pre><hr><section><aside class="header"><details open=""><summary>Header</summary><span class="field" data-name="url" data-value="https://example/y"><span class="field-name">URL</span>: <span class="field-value">https://example/y</span>\n</span></details></aside><p><a class="url" href="https://example/y#" target="_blank">#</a></p><h2>References</h2><ol class="references"></ol></section></aside>',
           '<p><a class="url" href="https://example/x#" target="_blank">#</a></p>',
         ]);

package/src/parser/api/parse.ts

@@ -11,6 +11,7 @@ import { ReadonlyURL } from 'spica/url';
 import { frag } from 'typed-dom/dom';
 
 interface Options extends ParserOptions {
+  readonly local?: boolean;
   readonly test?: boolean;
 }
 
@@ -21,6 +22,7 @@ export function parse(source: string, options: Options = {}, context?: Context):
     host: options.host ?? context?.host ?? new ReadonlyURL(location.pathname, location.origin),
     url: url ? new ReadonlyURL(url as ':') : context?.url,
     id: options.id ?? context?.id,
+    local: options.local ?? context?.local,
     caches: context?.caches,
     resources: context?.resources,
   });

package/src/parser/block/blockquote.test.ts

@@ -78,7 +78,7 @@ describe('Unit: parser/block/blockquote', () => {
       assert.deepStrictEqual(inspect(parser, input('!>  a \n b  c ', new Context())), [['<blockquote><section><p> a<br> b c</p><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!>> a', new Context())), [['<blockquote><blockquote><section><p>a</p><h2>References</h2><ol class="references"></ol></section></blockquote></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!>> a\n> b', new Context())), [['<blockquote><blockquote><section><p>a</p><h2>References</h2><ol class="references"></ol></section></blockquote><section><p>b</p><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('!> - a', new Context())), [['<blockquote><section><ul><li>a</li></ul><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('!> - a', new Context())), [['<blockquote><section><ul><li id="index:random:a" class="local">a</li></ul><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!> ```\na\n```', new Context())), [['<blockquote><section><pre class="text">a</pre><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!> ```\n> a\n```', new Context())), [['<blockquote><section><pre class="text">a</pre><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!> ```\n> a\n> ```', new Context())), [['<blockquote><section><pre class="text">a</pre><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
@@ -91,10 +91,10 @@ describe('Unit: parser/block/blockquote', () => {
       assert.deepStrictEqual(inspect(parser, input('!>> > a\n> b', new Context())), [['<blockquote><blockquote><section><blockquote><pre>a</pre></blockquote><h2>References</h2><ol class="references"></ol></section></blockquote><section><p>b</p><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!> !> a', new Context())), [['<blockquote><section><blockquote><section><p>a</p><h2>References</h2><ol class="references"></ol></section></blockquote><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser, input('!> \na', new Context())), [['<blockquote><section><p>a</p><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('!>> ## a\n> ## a', new Context())), [['<blockquote><blockquote><section><h2>a</h2><h2>References</h2><ol class="references"></ol></section></blockquote><section><h2>a</h2><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('!>> ~ a\n> ~ a', new Context())), [['<blockquote><blockquote><section><dl><dt>a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></blockquote><section><dl><dt>a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('!>> ~~~figure $test-a\n>> > \n>>\n~~~\n> ~~~figure $test-a\n> > \n>\n[#a]\n~~~', new Context())), [['<blockquote><blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"><a class="index">a</a></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('!>> ((a))\n> ((a))', new Context())), [['<blockquote><blockquote><section><p><sup class="annotation disabled" title="a"><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation disabled" title="a"><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('!>> ## a\n> ## a', new Context())), [['<blockquote><blockquote><section><h2 id="index:random:a" class="local">a</h2><h2>References</h2><ol class="references"></ol></section></blockquote><section><h2 id="index:random:a" class="local">a</h2><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('!>> ~ a\n> ~ a', new Context())), [['<blockquote><blockquote><section><dl><dt id="index:random:a" class="local">a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></blockquote><section><dl><dt id="index:random:a" class="local">a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('!>> ~~~figure $test-a\n>> > \n>>\n~~~\n> ~~~figure $test-a\n> > \n>\n[#a]\n~~~', new Context())), [['<blockquote><blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:random:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:random:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"><a class="index" href="#index:random:a">a</a></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('!>> ((a))\n> ((a))', new Context())), [['<blockquote><blockquote><section><p><sup class="annotation local" id="annotation:random:ref:a:1" title="a"><a href="#annotation:random:def:a:1">*1</a></sup></p><ol class="annotations"><li id="annotation:random:def:a:1" data-marker="*1"><span>a</span><sup><a href="#annotation:random:ref:a:1">^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation local" id="annotation:random:ref:a:1" title="a"><a href="#annotation:random:def:a:1">*1</a></sup></p><ol class="annotations"><li id="annotation:random:def:a:1" data-marker="*1"><span>a</span><sup><a href="#annotation:random:ref:a:1">^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
     });
 
   });

package/src/parser/block/blockquote.ts

@@ -4,7 +4,7 @@ import { List, Node } from '../../combinator/data/parser';
 import { union, some, consume, recursion, block, validate, rewrite, open, convert, lazy, fmap } from '../../combinator';
 import { autolink } from '../autolink';
 import { contentline } from '../source';
-import { unwrap } from '../util';
+import { unwrap, randomID } from '../util';
 import { parse } from '../api/parse';
 import { html, defrag } from 'typed-dom/dom';
 
@@ -44,7 +44,8 @@ const markdown: BlockquoteParser.MarkdownParser = lazy(() => fmap(
         const { source } = context;
         const references = html('ol', { class: 'references' });
         const document = parse(source, {
-          id: '',
+          local: true,
+          id: context.id === '' ? '' : randomID(),
           notes: {
             references,
           },

package/src/parser/block/extension/aside.test.ts

@@ -16,9 +16,9 @@ describe('Unit: parser/block/extension/aside', () => {
     });
 
     it('valid', () => {
-      assert.deepStrictEqual(inspect(parser, input('~~~aside\n# 0\n~~~', new Context())), [['<aside id="index::0" class="aside"><h1>0</h1><h2>References</h2><ol class="references"></ol></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~aside\n## 0\n~~~', new Context())), [['<aside id="index::0" class="aside"><h2>0</h2><h2>References</h2><ol class="references"></ol></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~aside\n# 0\n\n$-0.0\n\n## 1\n\n$test-a\n> \n~~~', new Context())), [['<aside id="index::0" class="aside"><h1>0</h1><figure data-label="$-0.0" data-group="$" hidden="" data-number="0.0"></figure><h2>1</h2><figure data-type="quote" data-label="test-a" data-group="test" data-number="1.1"><figcaption><span class="figindex">Test 1.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~aside\n# 0\n~~~', new Context())), [['<aside id="index::0" class="aside"><h1 id="index:random:0" class="local">0</h1><h2>References</h2><ol class="references"></ol></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~aside\n## 0\n~~~', new Context())), [['<aside id="index::0" class="aside"><h2 id="index:random:0" class="local">0</h2><h2>References</h2><ol class="references"></ol></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~aside\n# 0\n\n$-0.0\n\n## 1\n\n$test-a\n> \n~~~', new Context())), [['<aside id="index::0" class="aside"><h1 id="index:random:0" class="local">0</h1><figure data-label="$-0.0" data-group="$" hidden="" data-number="0.0"></figure><h2 id="index:random:1" class="local">1</h2><figure data-type="quote" data-label="test-a" data-group="test" data-number="1.1" id="label:random:test-a"><figcaption><span class="figindex">Test 1.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></aside>'], '']);
     });
 
   });

package/src/parser/block/extension/aside.ts

@@ -3,7 +3,7 @@ import { Recursion } from '../../context';
 import { List, Node } from '../../../combinator/data/parser';
 import { recursion, block, fence, fmap } from '../../../combinator';
 import { identity } from '../../inline/extension/indexee';
-import { unwrap, invalid } from '../../util';
+import { unwrap, invalid, randomID } from '../../util';
 import { parse } from '../../api/parse';
 import { html } from 'typed-dom/dom';
 
@@ -26,12 +26,12 @@ export const aside: ExtensionParser.AsideParser = block(recursion(Recursion.bloc
     ]);
     const references = html('ol', { class: 'references' });
     const document = parse(body.slice(0, -1), {
-      id: '',
+      local: true,
+      id: context.id === '' ? '' : randomID(),
       notes: {
         references,
       },
     }, context);
-    assert(!document.querySelector('[id]'));
     const heading = 'H1 H2 H3 H4 H5 H6'.split(' ').includes(document.firstElementChild?.tagName!) && document.firstElementChild as HTMLHeadingElement;
     if (!heading) return new List([
       new Node(html('pre', {

package/src/parser/block/extension/example.test.ts

@@ -21,11 +21,11 @@ describe('Unit: parser/block/extension/example', () => {
       assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\na\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">a</pre><hr><section><p>a</p><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n++a\nb++\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">++a\nb++</pre><hr><section><p><ins>a<br>b</ins></p><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n$fig-a\n!https://host\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">$fig-a\n!https://host</pre><hr><section><figure data-type="media" data-label="fig-a" data-group="fig" data-number="1"><figcaption><span class="figindex">Fig. 1. </span><span class="figtext"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt="https://host"></a></div></figure><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n[$fig-a]\n!https://host\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">[$fig-a]\n!https://host</pre><hr><section><figure data-type="media" data-label="fig-a" data-group="fig" data-number="1"><figcaption><span class="figindex">Fig. 1. </span><span class="figtext"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt="https://host"></a></div></figure><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n## a\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">## a</pre><hr><section><h2>a</h2><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n~ a\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">~ a</pre><hr><section><dl><dt>a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n((a))[[b]]\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">((a))[[b]]</pre><hr><section><p><sup class="annotation disabled" title="a"><a>*1</a></sup><sup class="reference disabled" title="b"><a>[1]</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"><li><span>b</span><sup><a>^1</a></sup></li></ol></section></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n$fig-a\n!https://host\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">$fig-a\n!https://host</pre><hr><section><figure data-type="media" data-label="fig-a" data-group="fig" data-number="1" id="label:random:fig-a"><figcaption><span class="figindex">Fig. 1. </span><span class="figtext"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt="https://host"></a></div></figure><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n[$fig-a]\n!https://host\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">[$fig-a]\n!https://host</pre><hr><section><figure data-type="media" data-label="fig-a" data-group="fig" data-number="1" id="label:random:fig-a"><figcaption><span class="figindex">Fig. 1. </span><span class="figtext"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt="https://host"></a></div></figure><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n## a\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">## a</pre><hr><section><h2 id="index:random:a" class="local">a</h2><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n~ a\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">~ a</pre><hr><section><dl><dt id="index:random:a" class="local">a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser, input('~~~example/markdown\n((a))[[b]]\n~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">((a))[[b]]</pre><hr><section><p><sup class="annotation local" id="annotation:random:ref:a:1" title="a"><a href="#annotation:random:def:a:1">*1</a></sup><sup class="reference local" id="reference:random:ref:b:1" title="b"><a href="#reference:random:def:b">[1]</a></sup></p><ol class="annotations"><li id="annotation:random:def:a:1" data-marker="*1"><span>a</span><sup><a href="#annotation:random:ref:a:1">^1</a></sup></li></ol><h2>References</h2><ol class="references"><li id="reference:random:def:b"><span>b</span><sup><a href="#reference:random:ref:b:1">^1</a></sup></li></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser, input('~~~~example/markdown\na\n~~~~', new Context())), [['<aside class="example" data-type="markdown"><pre translate="no">a</pre><hr><section><p>a</p><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser, input('~~~example/math\na\n~~~', new Context())), [['<aside class="example" data-type="math"><pre translate="no">a</pre><hr><div class="math" translate="no">$$\na\n$$</div></aside>'], '']);
       assert.deepStrictEqual(inspect(parser, input(`~~~example/math\n0${'\n'.repeat(100)}~~~`, new Context()), '>'), [['<aside class="example" data-type="math">'], '']);

package/src/parser/block/extension/example.ts

@@ -3,7 +3,7 @@ import { Recursion } from '../../context';
 import { List, Node, subinput } from '../../../combinator/data/parser';
 import { recursion, block, fence, fmap } from '../../../combinator';
 import { mathblock } from '../mathblock';
-import { unwrap, invalid } from '../../util';
+import { unwrap, invalid, randomID } from '../../util';
 import { parse } from '../../api/parse';
 import { html } from 'typed-dom/dom';
 
@@ -28,12 +28,12 @@ export const example: ExtensionParser.ExampleParser = block(recursion(Recursion.
       case 'markdown': {
         const references = html('ol', { class: 'references' });
         const document = parse(body.slice(0, -1), {
-          id: '',
+          local: true,
+          id: context.id === '' ? '' : randomID(),
           notes: {
             references,
           },
         }, context);
-        assert(!document.querySelector('[id]'));
         return new List([
           new Node(html('aside', { class: 'example', 'data-type': 'markdown' }, [
             html('pre', { translate: 'no' }, body.slice(0, -1)),

package/src/parser/context.ts

@@ -8,8 +8,9 @@ export class Context extends Ctx {
     super(options);
     const {
       segment,
-      buffer,
+      local,
       sequential,
+      buffer,
       header,
       host,
       url,
@@ -17,8 +18,9 @@ export class Context extends Ctx {
       caches,
     } = options;
     this.segment = segment ?? Segment.unknown;
-    this.buffer = buffer ?? new List();
+    this.local = local ?? false;
     this.sequential = sequential ?? false;
+    this.buffer = buffer ?? new List();
     this.header = header ?? true;
     this.host = host;
     this.url = url;
@@ -26,8 +28,9 @@ export class Context extends Ctx {
     this.caches = caches;
   }
   public override segment: Segment;
-  public buffer: List<Node<(string | HTMLElement)>>;
+  public local: boolean;
   public sequential: boolean;
+  public buffer: List<Node<(string | HTMLElement)>>;
   public recursion = new RecursionCounter('annotation', 2);
   public readonly header: boolean;
   public readonly host?: URL;

package/src/parser/inline/extension/indexee.ts

@@ -5,23 +5,28 @@ import { define } from 'typed-dom/dom';
 
 export function indexee<P extends Parser<HTMLElement, Context>>(parser: P): P;
 export function indexee(parser: Parser<HTMLElement, Context>): Parser<HTMLElement> {
-  return fmap(parser, (ns, { id }) =>
+  return fmap(parser, (ns, { id, local }) =>
     ns.length === 1
-      ? new List([new Node(define(ns.head!.value, { id: identity('index', id, ns.head!.value), 'data-index': null }))])
+      ? new List([new Node(define(ns.head!.value, {
+          id: identity('index', id, ns.head!.value),
+          class: local ? `${ns.head!.value.className} local`.trimStart() : undefined,
+          'data-index': null
+        }))])
       : ns);
 }
 
-const MAX = 60;
-const ELLIPSIS = '...';
-const PART = (MAX - ELLIPSIS.length) / 2 | 0;
-const REM = MAX - PART * 2 - ELLIPSIS.length;
-assert(PART * 2 + REM + ELLIPSIS.length === MAX);
 const table = [
   ...[...Array(36)].map((_, i) => i.toString(36)),
   ...[...Array(36)].map((_, i) => i.toString(36).toUpperCase()).slice(-26),
   '-', '=',
 ].join('');
 assert(table.length === 64);
+const MAX = 64 - '='.length - Math.ceil(Math.log(~0 >>> 0) / Math.log(table.length));
+assert(MAX === 57);
+const ELLIPSIS = '...';
+const PART = (MAX - ELLIPSIS.length) / 2 | 0;
+const REM = MAX - PART * 2 - ELLIPSIS.length;
+assert(PART * 2 + REM + ELLIPSIS.length === MAX);
 export function identity(
   type: 'index' | 'mark' | '',
   id: string | undefined,
@@ -68,10 +73,10 @@ assert.deepStrictEqual(
   `${'0'.repeat(MAX - 1)}1`);
 assert.deepStrictEqual(
   identity('index', undefined, `0${'1'.repeat(MAX / 2)}${'2'.repeat(MAX / 2)}3`)!.slice(7),
-  `0${'1'.repeat(PART + REM - 1)}${ELLIPSIS}${'2'.repeat(PART - 1)}3=MYkmc`);
+  `0${'1'.repeat(PART + REM - 1)}${ELLIPSIS}${'2'.repeat(PART - 1)}3=E0deO`);
 assert.deepStrictEqual(
   identity('index', undefined, `0${'1'.repeat(MAX * 2)}${'2'.repeat(MAX * 2)}3`)!.slice(7),
-  `0${'1'.repeat(PART + REM - 1)}${ELLIPSIS}${'2'.repeat(PART - 1)}3=3bF8VU`);
+  `0${'1'.repeat(PART + REM - 1)}${ELLIPSIS}${'2'.repeat(PART - 1)}3=2RHwOS`);
 function hash(source: string): string {
   let x = 0;
   for (let i = 0; i < source.length; ++i) {
@@ -88,6 +93,8 @@ assert(hash('\x00') !== '0');
 assert(hash('\x01') !== '0');
 assert(hash('\x00') !== hash(String.fromCharCode(1 << 15)));
 // 62も64も最大6桁
+assert(Math.ceil(Math.log(~0 >>> 0) / Math.log(62)) === 6);
+assert(Math.ceil(Math.log(~0 >>> 0) / Math.log(64)) === 6);
 function baseR(n: number, r: number): string {
   assert(n >= 0);
   assert(Math.floor(n) === n);
@@ -104,6 +111,7 @@ function baseR(n: number, r: number): string {
 }
 assert(baseR(0, 36) === (0).toString(36));
 assert(baseR(~0 >>> 0, 36) === (~0 >>> 0).toString(36));
+assert(baseR(0, 62) === '0');
 assert(baseR(61, 62) === 'Z');
 assert(baseR(62, 62) === '10');
 

package/src/parser/processor/figure.test.ts

@@ -13,7 +13,7 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           []);
       }
     });
@@ -28,11 +28,11 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<p><a class="label" data-label="test-a" href="#label:test-a">Test 1</a></p>',
-            '<p><a class="label invalid" data-label="test-b" data-invalid-syntax="label" data-invalid-type="reference" data-invalid-message="Missing the target figure">$test-b</a></p>',
+            '<p><a class="label invalid" data-label="test-b">$test-b</a></p>',
             '<p><a class="label" data-label="test-a" href="#label:test-a">Test 1</a></p>',
           ]);
       }
@@ -50,13 +50,13 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h2 id="index::0">0</h2>',
             '<figure data-type="quote" data-label="test-b" data-group="test" data-number="2" id="label:test-b"><figcaption><span class="figindex">Test 2. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<figure data-type="quote" data-label="quote-a" data-group="quote" data-number="1" id="label:quote-a"><figcaption><span class="figindex">Quote 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
-            '<figure data-type="quote" data-label="test-b" data-group="test" data-number="3" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Duplicate label"><figcaption><span class="figindex">Test 3. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
+            '<figure data-type="quote" data-label="test-b" data-group="test" data-number="3" class="invalid"><figcaption><span class="figindex">Test 3. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<figure data-type="quote" data-label="test-c" data-group="test" data-number="4" id="label:test-c"><figcaption><span class="figindex">Test 4. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
           ]);
       }
@@ -70,7 +70,7 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             '<figure data-type="math" data-label="$-a" data-group="$" data-number="1" id="label:$-a"><figcaption><span class="figindex">(1)</span><span class="figtext"></span></figcaption><div><div class="math" translate="no">$$\n$$</div></div></figure>',
             '<p><a class="label" data-label="$-a" href="#label:$-a">(1)</a></p>',
@@ -92,7 +92,7 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             '<figure data-type="quote" data-label="test-2" data-group="test" data-number="2" id="label:test-2"><figcaption><span class="figindex">Test 2. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<figure data-type="quote" data-label="test-3.1" data-group="test" data-number="3.1" id="label:test-3.1"><figcaption><span class="figindex">Test 3.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
@@ -101,7 +101,7 @@ describe('Unit: parser/processor/figure', () => {
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<p><a class="label" data-label="test-2" href="#label:test-2">Test 2</a></p>',
             '<p><a class="label" data-label="$-4.1.1" href="#label:$-4.1.1">(4.1.1)</a></p>',
-            '<p><a class="label invalid" data-label="test-1" data-invalid-syntax="label" data-invalid-type="reference" data-invalid-message="Missing the target figure">$test-1</a></p>',
+            '<p><a class="label invalid" data-label=\"test-1\">$test-1</a></p>',
           ]);
       }
     });
@@ -116,10 +116,10 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
-            '<blockquote><blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote>',
-            '<aside class="example" data-type="markdown"><pre translate="no">~~~figure $test-a\n&gt; \n\n~~~\n\n$test-a</pre><hr><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><p><a class="label disabled" data-label="test-a">Test 1</a></p><h2>References</h2><ol class="references"></ol></section></aside>',
+            '<blockquote><blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:random:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:random:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote>',
+            '<aside class="example" data-type="markdown"><pre translate="no">~~~figure $test-a\n&gt; \n\n~~~\n\n$test-a</pre><hr><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:random:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><p><a class="label local" data-label="test-a" href="#label:random:test-a">Test 1</a></p><h2>References</h2><ol class="references"></ol></section></aside>',
             '<figure data-type="quote" data-label="test-b" data-group="test" data-number="1" id="label:test-b"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="2" id="label:test-a"><figcaption><span class="figindex">Test 2. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
           ]);
@@ -174,20 +174,20 @@ describe('Unit: parser/processor/figure', () => {
             '<h2 id="index::0">0</h2>',
             '<figure data-type="quote" data-label="test-1" data-group="test" data-number="1" id="label:test-1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h2 id="index::0">0</h2>',
-            '<blockquote><section><h2>0</h2><h2>References</h2><ol class="references"></ol></section></blockquote>',
+            '<blockquote><section><h2 id="index:random:0" class="local">0</h2><h2>References</h2><ol class="references"></ol></section></blockquote>',
             '<figure data-type="quote" data-label="test-b" data-group="test" data-number="2.1" id="label:test-b"><figcaption><span class="figindex">Test 2.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h2 id="index::0">0</h2>',
-            '<figure data-label="$-0.0.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Base index must be $-x.0 format"></figure>',
+            '<figure data-label="$-0.0.0" data-group="$" class="invalid"></figure>',
             '<h3 id="index::0">0</h3>',
             '<figure data-label="$-0.0" data-group="$" hidden="" data-number="3.0"></figure>',
             '<figure data-type="quote" data-label="test-c" data-group="test" data-number="3.1" id="label:test-c"><figcaption><span class="figindex">Test 3.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h2 id="index::0">0</h2>',
-            '<figure data-label="$-0.1.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Base index must be $-x.0 format"></figure>',
+            '<figure data-label="$-0.1.0" data-group="$" class="invalid"></figure>',
             '<figure data-type="quote" data-label="test-d" data-group="test" data-number="4.1" id="label:test-d"><figcaption><span class="figindex">Test 4.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
-            '<figure data-label="$-0.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="position" data-invalid-message="Base index declarations must be after level 1 to 6 headings"></figure>',
-            '<figure data-label="$-0.1.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Base index must be $-x.0 format"></figure>',
-            '<figure data-label="$-0.4.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Base index must be $-x.0 format"></figure>',
-            '<figure data-label="$-0.1.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Base index must be $-x.0 format"></figure>',
+            '<figure data-label="$-0.0" data-group="$" class="invalid"></figure>',
+            '<figure data-label="$-0.1.0" data-group="$" class="invalid"></figure>',
+            '<figure data-label="$-0.4.0" data-group="$" class="invalid"></figure>',
+            '<figure data-label="$-0.1.0" data-group="$" class="invalid"></figure>',
             '<h2 id="index::0">0</h2>',
             '<h2 id="index::0">0</h2>',
             '<figure data-label="$-0.0" data-group="$" hidden="" data-number="6.0"></figure>',
@@ -195,15 +195,15 @@ describe('Unit: parser/processor/figure', () => {
             '<h2 id="index::0">0</h2>',
             '<figure data-label="$-5.0" data-group="$" hidden="" data-number="5.0"></figure>',
             '<figure data-type="quote" data-label="test-f" data-group="test" data-number="5.1" id="label:test-f"><figcaption><span class="figindex">Test 5.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
-            '<figure data-label="$-0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Invalid base index"></figure>',
+            '<figure data-label="$-0" data-group="$" class="invalid"></figure>',
             '<figure data-type="quote" data-label="test-g" data-group="test" data-number="5.2" id="label:test-g"><figcaption><span class="figindex">Test 5.2. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h3 id="index::0">0</h3>',
-            '<figure data-label="$-0.0.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="argument" data-invalid-message="Base index must be $-x.0 format"></figure>',
+            '<figure data-label="$-0.0.0" data-group="$" class="invalid"></figure>',
             '<figure data-type="quote" data-label="test-h" data-group="test" data-number="5.3" id="label:test-h"><figcaption><span class="figindex">Test 5.3. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h3 id="index::0">0</h3>',
             '<figure data-type="quote" data-label="test-i" data-group="test" data-number="5.4" id="label:test-i"><figcaption><span class="figindex">Test 5.4. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<h1 id="index::0">0</h1>',
-            '<figure data-type="quote" data-label="test-j" data-group="test" data-number="6.1" id="label:test-j"><figcaption><span class="figindex">Test 6.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
+            '<figure data-type="quote" data-label="test-j" data-group="test" data-number="6.1" id="label:test-j"><figcaption><span class="figindex">Test 6.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>'
           ]);
       }
     });
@@ -235,17 +235,17 @@ describe('Unit: parser/processor/figure', () => {
         assert.deepStrictEqual(
           [...target.children].map(el => normalize(el.outerHTML)),
           [
-            '<figure data-label="$-0.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="position" data-invalid-message="Base index declarations must be after level 1 to 6 headings"></figure>',
+            '<figure data-label="$-0.0" data-group="$" class="invalid"></figure>',
             '<h2 id="index::0">0</h2>',
             '<figure data-label="$-0.0" data-group="$" hidden="" data-number="0.0"></figure>',
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="0.1" id="label:test-a"><figcaption><span class="figindex">Test 0.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
-            '<figure data-label="$-0.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="position" data-invalid-message="Base index declarations must be after level 1 to 6 headings"></figure>',
+            '<figure data-label="$-0.0" data-group="$" class="invalid"></figure>',
             '<h2 id="index::0">0</h2>',
             '<figure data-type="quote" data-label="test-b" data-group="test" data-number="1.1" id="label:test-b"><figcaption><span class="figindex">Test 1.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
-            '<figure data-label="$-0.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="position" data-invalid-message="Base index declarations must be after level 1 to 6 headings"></figure>',
+            '<figure data-label="$-0.0" data-group="$" class="invalid"></figure>',
             '<h3 id="index::0">0</h3>',
             '<figure data-type="quote" data-label="test-c" data-group="test" data-number="1.2" id="label:test-c"><figcaption><span class="figindex">Test 1.2. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
-            '<figure data-label="$-1.0" data-group="$" class="invalid" data-invalid-syntax="figure" data-invalid-type="position" data-invalid-message="Base index declarations must be after level 1 to 6 headings"></figure>',
+            '<figure data-label="$-1.0" data-group="$" class="invalid"></figure>',
             '<h2 id="index::0">0</h2>',
             '<figure data-label="$-0.0" data-group="$" hidden="" data-number="2.0"></figure>',
             '<figure data-type="quote" data-label="test-d" data-group="test" data-number="2.1" id="label:test-d"><figcaption><span class="figindex">Test 2.1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
@@ -267,7 +267,7 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<p><a class="label" data-label="test-a" href="#label:test-a">Test 1</a></p>',
@@ -285,7 +285,7 @@ describe('Unit: parser/processor/figure', () => {
       for (let i = 0; i < 3; ++i) {
         [...figure(target, undefined, { id: '0' })];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             '<figure data-type="quote" data-label="test-a" data-group="test" data-number="1" id="label:0:test-a"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure>',
             '<p><mark id="mark:0:[$test-a]"><a class="label" data-label="test-a" href="#label:0:test-a">Test 1</a></mark><a href="#mark:0:[$test-a]"></a></p>',

package/src/parser/processor/figure.ts

@@ -8,11 +8,14 @@ import { querySelectorAll } from 'typed-dom/query';
 export function* figure(
   target: ParentNode & Node,
   notes?: { readonly references: HTMLOListElement; },
-  opts: { readonly id?: string; } = {},
+  opts: {
+    readonly id?: string;
+    readonly local?: boolean;
+  } = {},
 ): Generator<HTMLAnchorElement | undefined, undefined, undefined> {
   const refs = new MultiQueue<string, HTMLAnchorElement>(push(
-    querySelectorAll(target, 'a.label:not(.disabled)[data-label]'),
-    notes && querySelectorAll(notes.references, 'a.label:not(.disabled)') || [])
+    querySelectorAll(target, 'a.label:not(.local)[data-label]'),
+    notes && querySelectorAll(notes.references, 'a.label:not(.local)') || [])
     .map(el => [el.getAttribute('data-label')!, el]));
   const labels = new Set<string>();
   const numbers = new Map<string, string>();
@@ -117,7 +120,10 @@ export function* figure(
       }
       if (ref.hash.slice(1) === def.id && ref.innerText === figindex) continue;
       yield define(ref,
-        opts.id !== '' ? { href: `#${def.id}` } : { class: `${ref.className} disabled` },
+        {
+          class: opts.local ? `${ref.className} local` : undefined,
+          href: opts.id !== '' ? `#${def.id}` : undefined,
+        },
         figindex);
     }
   }

package/src/parser/processor/note.test.ts

@@ -1,6 +1,7 @@
 import { note } from './note';
 import { parse as parse_ } from '../../parser';
 import { html } from 'typed-dom/dom';
+import { normalize } from '../../debug.test';
 
 const parse = (s: string) => parse_(s, { test: true });
 
@@ -10,7 +11,7 @@ describe('Unit: parser/processor/note', () => {
       const target = parse('');
       [...note(target)];
       assert.deepStrictEqual(
-        [...target.children].map(el => el.outerHTML),
+        [...target.children].map(el => normalize(el.outerHTML)),
         []);
     });
 
@@ -19,7 +20,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         assert.deepStrictEqual([...note(target)].length, i === 0 ? 2 : 3);
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation::ref:a_b:1', title: 'a b' }, [
@@ -41,7 +42,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         assert.deepStrictEqual([...note(target)].length, i === 0 ? 4 : 6);
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation::ref:1:1', title: '1' }, [
@@ -70,7 +71,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation::ref:1:1', title: '1' }, [
@@ -123,10 +124,10 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
-            '<blockquote><blockquote><section><p><sup class="annotation disabled" title="1"><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>1</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation disabled" title="2"><a>*1</a></sup><br>~~~</p><ol class="annotations"><li data-marker="*1"><span>2</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>',
-            '<aside class="example" data-type="markdown"><pre translate="no">((3))</pre><hr><section><p><sup class="annotation disabled" title="3"><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>3</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></aside>',
+            '<blockquote><blockquote><section><p><sup class="annotation local" id="annotation:random:ref:1:1" title="1"><a href="#annotation:random:def:1:1">*1</a></sup></p><ol class="annotations"><li id="annotation:random:def:1:1" data-marker="*1"><span>1</span><sup><a href="#annotation:random:ref:1:1">^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation local" id="annotation:random:ref:2:1" title="2"><a href="#annotation:random:def:2:1">*1</a></sup><br>~~~</p><ol class="annotations"><li id="annotation:random:def:2:1" data-marker="*1"><span>2</span><sup><a href="#annotation:random:ref:2:1">^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>',
+            '<aside class="example" data-type="markdown"><pre translate="no">((3))</pre><hr><section><p><sup class="annotation local" id="annotation:random:ref:3:1" title="3"><a href="#annotation:random:def:3:1">*1</a></sup></p><ol class="annotations"><li id="annotation:random:def:3:1" data-marker="*1"><span>3</span><sup><a href="#annotation:random:ref:3:1">^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></aside>',
             '<p><sup class="annotation" id="annotation::ref:4:1" title="4"><a href="#annotation::def:4:1">*1</a></sup></p>',
             '<ol class="annotations"><li id="annotation::def:4:1" data-marker="*1"><span>4</span><sup><a href="#annotation::ref:4:1">^1</a></sup></li></ol>',
           ]);
@@ -138,7 +139,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation::ref:1:1', title: '1' }, [
@@ -204,7 +205,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         assert.deepStrictEqual([...note(target, undefined, { id: '0' })].length, i === 0 ? 2 : 3);
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation:0:ref:a_b:1', title: 'a b' }, [
@@ -226,7 +227,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation::ref:a((b)):1', title: 'a((b))' }, [
@@ -282,7 +283,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target, notes)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'reference', id: 'reference::ref:a_b:1', title: 'a b' }, [
@@ -291,7 +292,7 @@ describe('Unit: parser/processor/note', () => {
             ]).outerHTML,
           ]);
         assert.deepStrictEqual(
-          [notes.references.outerHTML],
+          [normalize(notes.references.outerHTML)],
           [
             html('ol', [
               html('li', { id: 'reference::def:a_b' }, [
@@ -309,7 +310,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target, notes)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'reference', 'data-abbr': 'A 1', id: 'reference::ref:A_1:1', title: 'b' }, [
@@ -324,7 +325,7 @@ describe('Unit: parser/processor/note', () => {
             ]).outerHTML,
           ]);
         assert.deepStrictEqual(
-          [notes.references.outerHTML],
+          [normalize(notes.references.outerHTML)],
           [
             html('ol', [
               html('li', { id: 'reference::def:A_1' }, [
@@ -346,7 +347,7 @@ describe('Unit: parser/processor/note', () => {
       for (let i = 0; i < 3; ++i) {
         [...note(target, notes)];
         assert.deepStrictEqual(
-          [...target.children].map(el => el.outerHTML),
+          [...target.children].map(el => normalize(el.outerHTML)),
           [
             html('p', [
               html('sup', { class: 'annotation', id: 'annotation::ref:a[[^B]]:1', title: 'a[[^B]]' }, [
@@ -369,7 +370,7 @@ describe('Unit: parser/processor/note', () => {
             ]).outerHTML,
           ]);
         assert.deepStrictEqual(
-          [notes.references.outerHTML],
+          [normalize(notes.references.outerHTML)],
           [
             html('ol', [
               html('li', { id: 'reference::def:B' }, [

package/src/parser/processor/note.ts

@@ -9,7 +9,10 @@ export function* note(
     readonly annotations?: HTMLOListElement;
     readonly references: HTMLOListElement;
   },
-  opts: { readonly id?: string; } = {},
+  opts: {
+    readonly id?: string;
+    readonly local?: boolean;
+  } = {},
   bottom: Node | null = null,
 ): Generator<HTMLAnchorElement | HTMLLIElement | undefined, undefined, undefined> {
   const referenceRefMemory = referenceRefsMemoryCaller(target);
@@ -47,13 +50,13 @@ const referenceRefsMemoryCaller = memoize((target: Node) =>
 const annotation = build(
   'annotation',
   'annotations',
-  '.annotation:not(:is(.annotations, .references) .annotation, .disabled)',
+  '.annotation:not(:is(.annotations, .references) .annotation, .local)',
   n => `*${n}`,
   'h1, h2, h3, h4, h5, h6, aside.aside, hr');
 const reference = build(
   'reference',
   'references',
-  '.reference:not(:is(.annotations, .references) .reference, .disabled)',
+  '.reference:not(:is(.annotations, .references) .reference, .local)',
   (n, abbr) => `[${abbr || n}]`);
 
 function build(
@@ -69,7 +72,10 @@ function build(
     memory: Map<HTMLElement, RefMemory>,
     target: ParentNode & Node,
     note?: HTMLOListElement,
-    opts: { readonly id?: string } = {},
+    opts: {
+      readonly id?: string;
+      readonly local?: boolean;
+    } = {},
     bottom: Node | null = null,
   ): Generator<HTMLAnchorElement | HTMLLIElement | undefined, undefined, undefined> {
     const refInfoCaller = memoize((ref: HTMLElement) => {
@@ -164,7 +170,7 @@ function build(
       assert(syntax !== 'annotation' || title);
       define(ref, {
         id: refId,
-        class: opts.id !== '' ? undefined : void ref.classList.add('disabled'),
+        class: opts.local ? `${ref.className} local` : undefined,
         title,
       }, []);
       if (title && info.queue.length > 0) {

package/src/parser/util.ts

@@ -2,6 +2,7 @@ import { Parser, Result, List, Node, failsafe } from '../combinator/data/parser'
 import { tester } from '../combinator/data/delimiter';
 import { Context, Command } from './context';
 import { min } from 'spica/alias';
+import { rnd0Z } from 'spica/random';
 import { define } from 'typed-dom/dom';
 
 export function* unwrap<N>(nodes: List<Node<N>> | undefined): Iterable<N> {
@@ -129,3 +130,7 @@ export function stringify(nodes: Iterable<HTMLElement | string>): string {
   }
   return acc;
 }
+
+export function randomID(): string {
+  return `random-${rnd0Z(6)}`;
+}

package/src/util/toc.ts

@@ -1,7 +1,7 @@
 import { push } from 'spica/array';
 import { html } from 'typed-dom/dom';
 
-const selector = ':is(h1, h2, h3, h4, h5, h6, aside.aside)[id]';
+const selector = ':is(h1, h2, h3, h4, h5, h6, aside.aside)[id]:not(.local)';
 
 export function toc(source: DocumentFragment | HTMLElement | ShadowRoot): HTMLUListElement {
   const hs: HTMLHeadingElement[] = [];