@miliastry/quasar 1.0.2 → 1.0.4

package/dist/Visuals/lyne.css

@@ -59,6 +59,29 @@
   font-weight: 600 !important;
 }
 
+/* Editor timestamp chips (map surfaces) — the 45°-cut accent chip, same
+   geometry as the forum's refChip. */
+.bbcode-preview-lyne a.bb-timeref,
+.bbcode-preview.theme-lyne a.bb-timeref {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--font-numeric, "IBM Plex Mono", monospace) !important;
+  font-size: 0.5625rem !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--color-accent, #2EE6E2) !important;
+  background: rgb(46 230 226 / 0.08) !important;
+  border: 1px solid rgb(46 230 226 / 0.4) !important;
+  padding: 4px 10px;
+  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
+  text-decoration: none !important;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin: 0 2px;
+}
+
 /* ─── 45° Cut Panels ────────────────────────────────────────────────────── */
 
 .bb-cut-panel {
@@ -100,35 +123,35 @@
 .bbcode-preview.theme-lyne .notice,
 .bb-notice {
   display: block !important;
-  background: rgba(255, 195, 77, 0.08) !important;
-  border: 1px solid rgba(255, 195, 77, 0.4) !important;
+  background: rgba(46, 230, 226, 0.08);
+  border: 1px solid rgba(46, 230, 226, 0.4);
+  border-left: 3px solid #2EE6E2;
   border-radius: 0 !important;
   padding: 13px 16px !important;
   margin: 0 !important;
   font-size: 0.8125rem !important;
   line-height: 1.55 !important;
-  color: rgb(255, 224, 163) !important;
+  color: rgba(46, 230, 226, 0.95);
   white-space: normal !important;
   clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
   width: 100% !important;
   box-sizing: border-box !important;
 }
 
-/* Especificidad 0,2,0 (igual a `.bbcode-preview-lyne .notice`) para que el
-   `display:flex` gane sobre el `display:block` de la regla base del notice;
-   con un selector de clase simple (0,1,0) el símbolo quedaba ARRIBA del texto. */
 .bbcode-preview-lyne .bb-wnotice,
 .bbcode-preview.theme-lyne .bb-wnotice,
 .bb-notice.bb-wnotice {
   display: flex !important;
   gap: 12px !important;
   align-items: flex-start !important;
-  border-color: rgba(255, 195, 77, 0.6) !important;
-  background: rgba(255, 195, 77, 0.12) !important;
+  background: rgba(255, 195, 77, 0.08);
+  border: 1px solid rgba(255, 195, 77, 0.4);
+  border-left: 3px solid #FFC34D;
+  color: rgb(255, 224, 163);
 }
 
 .bb-notice-mark {
-  color: var(--color-warning, #FFC34D) !important;
+  color: var(--color-warning, #FFC34D);
   font-size: 0.9375rem !important;
   flex: 0 0 auto !important;
   margin-top: 1px !important;

package/dist/index.d.mts

@@ -2307,6 +2307,15 @@ interface HTMLRendererOptions {
         href: string;
         external?: boolean;
     } | null;
+    /**
+     * Timestamp chip linkifier (`1:23`, `01:23.456`, `01:23:456`). Called with
+     * the millisecond offset and the display label; return null to leave the
+     * timestamp as plain text. Used by map hosts that deep-link into an editor.
+     */
+    timestampResolver?: (ms: number, label: string) => {
+        href: string;
+        external?: boolean;
+    } | null;
 }
 declare class HTMLRenderer extends Visitor<string> {
     private options;
@@ -2548,15 +2557,18 @@ declare class HTMLRenderer extends Visitor<string> {
      */
     private static readonly MENTION_RE;
     /**
-     * Linkify `@username` runs in a plain-text leaf. Runs through the resolver;
-     * null leaves the run as text. Every interpolated string is HTML-escaped,
-     * and hrefs with dangerous protocols (javascript:, data:, vbscript:) are
-     * rejected — the mention stays as plain text even if the resolver returns
-     * one (defence in depth; the resolver itself should never produce it).
+     * Linkify a plain-text leaf: `@mention` runs and (optionally) timestamp
+     * chips. Both run through their resolver; null leaves the run as text.
+     * Every interpolated string is HTML-escaped, and hrefs with dangerous
+     * protocols (javascript:, data:, vbscript:) are rejected (defence in depth;
+     * the resolvers themselves should never produce one).
      */
-    private linkifyMentions;
+    private linkifyText;
+    /** `1:23`, `01:23.456`, `01:23:456` — the editor deep-link shape. */
+    private static readonly TS_RE;
+    private linkifyTimestamps;
     /** Root-relative, http(s), mailto and line:// hrefs are the only safe shapes. */
-    private isSafeMentionHref;
+    private isSafeHref;
     private escapeHtml;
 }
 

package/dist/index.d.ts

@@ -2307,6 +2307,15 @@ interface HTMLRendererOptions {
         href: string;
         external?: boolean;
     } | null;
+    /**
+     * Timestamp chip linkifier (`1:23`, `01:23.456`, `01:23:456`). Called with
+     * the millisecond offset and the display label; return null to leave the
+     * timestamp as plain text. Used by map hosts that deep-link into an editor.
+     */
+    timestampResolver?: (ms: number, label: string) => {
+        href: string;
+        external?: boolean;
+    } | null;
 }
 declare class HTMLRenderer extends Visitor<string> {
     private options;
@@ -2548,15 +2557,18 @@ declare class HTMLRenderer extends Visitor<string> {
      */
     private static readonly MENTION_RE;
     /**
-     * Linkify `@username` runs in a plain-text leaf. Runs through the resolver;
-     * null leaves the run as text. Every interpolated string is HTML-escaped,
-     * and hrefs with dangerous protocols (javascript:, data:, vbscript:) are
-     * rejected — the mention stays as plain text even if the resolver returns
-     * one (defence in depth; the resolver itself should never produce it).
+     * Linkify a plain-text leaf: `@mention` runs and (optionally) timestamp
+     * chips. Both run through their resolver; null leaves the run as text.
+     * Every interpolated string is HTML-escaped, and hrefs with dangerous
+     * protocols (javascript:, data:, vbscript:) are rejected (defence in depth;
+     * the resolvers themselves should never produce one).
      */
-    private linkifyMentions;
+    private linkifyText;
+    /** `1:23`, `01:23.456`, `01:23:456` — the editor deep-link shape. */
+    private static readonly TS_RE;
+    private linkifyTimestamps;
     /** Root-relative, http(s), mailto and line:// hrefs are the only safe shapes. */
-    private isSafeMentionHref;
+    private isSafeHref;
     private escapeHtml;
 }
 

package/dist/index.js

@@ -4817,7 +4817,8 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       theme: options.theme ?? (options.dialect === "lyne" ? "lyne" : "osu"),
       mediaProxy: options.mediaProxy,
       entityLinkResolver: options.entityLinkResolver,
-      mentionResolver: options.mentionResolver
+      mentionResolver: options.mentionResolver,
+      timestampResolver: options.timestampResolver
     };
   }
   // ─── Tag → HTML Element Map ─────────────────────────────
@@ -5046,7 +5047,7 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
   // ─── Node Rendering ─────────────────────────────────────
   renderNode(node) {
     if (node.children.length === 0 && node.kind === "text") {
-      let out = this.mentionResolver ? this.linkifyMentions(node.text) : this.escapeHtml(node.text);
+      let out = this.mentionResolver || this.options.timestampResolver ? this.linkifyText(node.text) : this.escapeHtml(node.text);
       const style = node.metadata?.style;
       if (style) {
         const inlineStyles = [];
@@ -5855,24 +5856,27 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
    */
   static MENTION_RE = /(?<![A-Za-z0-9_-])@([A-Za-z0-9_-]{3,15})(?![A-Za-z0-9_-])/g;
   /**
-   * Linkify `@username` runs in a plain-text leaf. Runs through the resolver;
-   * null leaves the run as text. Every interpolated string is HTML-escaped,
-   * and hrefs with dangerous protocols (javascript:, data:, vbscript:) are
-   * rejected — the mention stays as plain text even if the resolver returns
-   * one (defence in depth; the resolver itself should never produce it).
+   * Linkify a plain-text leaf: `@mention` runs and (optionally) timestamp
+   * chips. Both run through their resolver; null leaves the run as text.
+   * Every interpolated string is HTML-escaped, and hrefs with dangerous
+   * protocols (javascript:, data:, vbscript:) are rejected (defence in depth;
+   * the resolvers themselves should never produce one).
    */
-  linkifyMentions(text) {
-    const resolver = this.options.mentionResolver;
-    if (!resolver) return this.escapeHtml(text);
+  linkifyText(text) {
+    const mentionResolver = this.options.mentionResolver;
+    const timestampResolver = this.options.timestampResolver;
+    if (!mentionResolver && !timestampResolver) return this.escapeHtml(text);
     let out = "";
     let last = 0;
     _HTMLRenderer.MENTION_RE.lastIndex = 0;
     let m;
     while ((m = _HTMLRenderer.MENTION_RE.exec(text)) !== null) {
-      if (m.index > last) out += this.escapeHtml(text.slice(last, m.index));
+      if (m.index > last) {
+        out += this.linkifyTimestamps(text.slice(last, m.index), timestampResolver);
+      }
       const name = m[1];
-      const link = resolver(name);
-      if (link && this.isSafeMentionHref(link.href)) {
+      const link = mentionResolver?.(name);
+      if (link && this.isSafeHref(link.href)) {
         const ext = link.external ? ' target="_blank" rel="noopener"' : "";
         out += `<a class="bb-mention" href="${this.escapeHtml(link.href)}"${ext}>@${this.escapeHtml(name)}</a>`;
       } else {
@@ -5880,11 +5884,40 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       }
       last = m.index + m[0].length;
     }
+    if (last < text.length) {
+      out += this.linkifyTimestamps(text.slice(last), timestampResolver);
+    }
+    return out;
+  }
+  /** `1:23`, `01:23.456`, `01:23:456` — the editor deep-link shape. */
+  static TS_RE = /\b(\d{1,2}):([0-5]\d)(?:\.(\d{1,3})\b|:(\d{1,3})\b)?/g;
+  linkifyTimestamps(text, resolver) {
+    if (!resolver) return this.escapeHtml(text);
+    let out = "";
+    let last = 0;
+    _HTMLRenderer.TS_RE.lastIndex = 0;
+    let m;
+    while ((m = _HTMLRenderer.TS_RE.exec(text)) !== null) {
+      if (m.index > last) out += this.escapeHtml(text.slice(last, m.index));
+      const minutes = parseInt(m[1], 10);
+      const seconds = parseInt(m[2], 10);
+      const frac = m[3] ? parseInt(m[3].padEnd(3, "0"), 10) : m[4] ? parseInt(m[4], 10) : 0;
+      const ms = (minutes * 60 + seconds) * 1e3 + frac;
+      const label = m[4] ? `${m[1].padStart(2, "0")}:${m[2]}:${m[4].padStart(3, "0")}` : m[3] ? `${m[1]}:${m[2]}.${m[3]}` : `${m[1]}:${m[2]}`;
+      const link = resolver(ms, label);
+      if (link && this.isSafeHref(link.href)) {
+        const ext = link.external ? ' target="_blank" rel="noopener"' : "";
+        out += `<a class="bb-timeref" href="${this.escapeHtml(link.href)}"${ext}>${this.escapeHtml(label)}</a>`;
+      } else {
+        out += this.escapeHtml(m[0]);
+      }
+      last = m.index + m[0].length;
+    }
     if (last < text.length) out += this.escapeHtml(text.slice(last));
     return out;
   }
   /** Root-relative, http(s), mailto and line:// hrefs are the only safe shapes. */
-  isSafeMentionHref(href) {
+  isSafeHref(href) {
     const h = href.trim();
     if (h.startsWith("/") && !h.startsWith("//")) return true;
     return /^(https?:|mailto:|line:)/i.test(h);

package/dist/index.mjs

@@ -4815,7 +4815,8 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       theme: options.theme ?? (options.dialect === "lyne" ? "lyne" : "osu"),
       mediaProxy: options.mediaProxy,
       entityLinkResolver: options.entityLinkResolver,
-      mentionResolver: options.mentionResolver
+      mentionResolver: options.mentionResolver,
+      timestampResolver: options.timestampResolver
     };
   }
   // ─── Tag → HTML Element Map ─────────────────────────────
@@ -5044,7 +5045,7 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
   // ─── Node Rendering ─────────────────────────────────────
   renderNode(node) {
     if (node.children.length === 0 && node.kind === "text") {
-      let out = this.mentionResolver ? this.linkifyMentions(node.text) : this.escapeHtml(node.text);
+      let out = this.mentionResolver || this.options.timestampResolver ? this.linkifyText(node.text) : this.escapeHtml(node.text);
       const style = node.metadata?.style;
       if (style) {
         const inlineStyles = [];
@@ -5853,24 +5854,27 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
    */
   static MENTION_RE = /(?<![A-Za-z0-9_-])@([A-Za-z0-9_-]{3,15})(?![A-Za-z0-9_-])/g;
   /**
-   * Linkify `@username` runs in a plain-text leaf. Runs through the resolver;
-   * null leaves the run as text. Every interpolated string is HTML-escaped,
-   * and hrefs with dangerous protocols (javascript:, data:, vbscript:) are
-   * rejected — the mention stays as plain text even if the resolver returns
-   * one (defence in depth; the resolver itself should never produce it).
+   * Linkify a plain-text leaf: `@mention` runs and (optionally) timestamp
+   * chips. Both run through their resolver; null leaves the run as text.
+   * Every interpolated string is HTML-escaped, and hrefs with dangerous
+   * protocols (javascript:, data:, vbscript:) are rejected (defence in depth;
+   * the resolvers themselves should never produce one).
    */
-  linkifyMentions(text) {
-    const resolver = this.options.mentionResolver;
-    if (!resolver) return this.escapeHtml(text);
+  linkifyText(text) {
+    const mentionResolver = this.options.mentionResolver;
+    const timestampResolver = this.options.timestampResolver;
+    if (!mentionResolver && !timestampResolver) return this.escapeHtml(text);
     let out = "";
     let last = 0;
     _HTMLRenderer.MENTION_RE.lastIndex = 0;
     let m;
     while ((m = _HTMLRenderer.MENTION_RE.exec(text)) !== null) {
-      if (m.index > last) out += this.escapeHtml(text.slice(last, m.index));
+      if (m.index > last) {
+        out += this.linkifyTimestamps(text.slice(last, m.index), timestampResolver);
+      }
       const name = m[1];
-      const link = resolver(name);
-      if (link && this.isSafeMentionHref(link.href)) {
+      const link = mentionResolver?.(name);
+      if (link && this.isSafeHref(link.href)) {
         const ext = link.external ? ' target="_blank" rel="noopener"' : "";
         out += `<a class="bb-mention" href="${this.escapeHtml(link.href)}"${ext}>@${this.escapeHtml(name)}</a>`;
       } else {
@@ -5878,11 +5882,40 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       }
       last = m.index + m[0].length;
     }
+    if (last < text.length) {
+      out += this.linkifyTimestamps(text.slice(last), timestampResolver);
+    }
+    return out;
+  }
+  /** `1:23`, `01:23.456`, `01:23:456` — the editor deep-link shape. */
+  static TS_RE = /\b(\d{1,2}):([0-5]\d)(?:\.(\d{1,3})\b|:(\d{1,3})\b)?/g;
+  linkifyTimestamps(text, resolver) {
+    if (!resolver) return this.escapeHtml(text);
+    let out = "";
+    let last = 0;
+    _HTMLRenderer.TS_RE.lastIndex = 0;
+    let m;
+    while ((m = _HTMLRenderer.TS_RE.exec(text)) !== null) {
+      if (m.index > last) out += this.escapeHtml(text.slice(last, m.index));
+      const minutes = parseInt(m[1], 10);
+      const seconds = parseInt(m[2], 10);
+      const frac = m[3] ? parseInt(m[3].padEnd(3, "0"), 10) : m[4] ? parseInt(m[4], 10) : 0;
+      const ms = (minutes * 60 + seconds) * 1e3 + frac;
+      const label = m[4] ? `${m[1].padStart(2, "0")}:${m[2]}:${m[4].padStart(3, "0")}` : m[3] ? `${m[1]}:${m[2]}.${m[3]}` : `${m[1]}:${m[2]}`;
+      const link = resolver(ms, label);
+      if (link && this.isSafeHref(link.href)) {
+        const ext = link.external ? ' target="_blank" rel="noopener"' : "";
+        out += `<a class="bb-timeref" href="${this.escapeHtml(link.href)}"${ext}>${this.escapeHtml(label)}</a>`;
+      } else {
+        out += this.escapeHtml(m[0]);
+      }
+      last = m.index + m[0].length;
+    }
     if (last < text.length) out += this.escapeHtml(text.slice(last));
     return out;
   }
   /** Root-relative, http(s), mailto and line:// hrefs are the only safe shapes. */
-  isSafeMentionHref(href) {
+  isSafeHref(href) {
     const h = href.trim();
     if (h.startsWith("/") && !h.startsWith("//")) return true;
     return /^(https?:|mailto:|line:)/i.test(h);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miliastry/quasar",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Quasar Document Engine - Advanced BBCode/Markdown/HTML AST Engine",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -34,9 +34,7 @@
     "verify": "npm run typecheck && npm run test"
   },
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "files": [
     "dist",

package/src/Tests/LyneMode.test.ts

@@ -238,6 +238,37 @@ describe('Lyne Mode & Dialect Isolation', () => {
       expect(html).toContain('<a class="bb-mention" href="https://example.com/u/jane" target="_blank" rel="noopener">@jane</a>')
     })
 
+    it('turns timestamps into editor deep-link chips via timestampResolver', () => {
+      const doc = new BBCodeDocumentModel({
+        source: 'At 1:23 the beat drops, see 04:05.5 for the outro',
+        mode: 'lyne',
+      })
+      const renderer = new HTMLRenderer({
+        registry: doc.tagRegistry,
+        dialect: 'lyne',
+        theme: 'lyne',
+        timestampResolver: (ms, label) => ({ href: `line://edit?map=42&t=${ms}`, external: false }),
+      })
+      const html = renderer.render(doc.root!)
+      expect(html).toContain('<a class="bb-timeref" href="line://edit?map=42&amp;t=83000">1:23</a>')
+      expect(html).toContain('<a class="bb-timeref" href="line://edit?map=42&amp;t=245500">04:05.5</a>')
+    })
+
+    it('keeps timestamps as plain text without timestampResolver', () => {
+      const doc = new BBCodeDocumentModel({
+        source: 'At 1:23 nothing happens',
+        mode: 'lyne',
+      })
+      const renderer = new HTMLRenderer({
+        registry: doc.tagRegistry,
+        dialect: 'lyne',
+        theme: 'lyne',
+      })
+      const html = renderer.render(doc.root!)
+      expect(html).toContain('At 1:23 nothing happens')
+      expect(html).not.toContain('bb-timeref')
+    })
+
     it('renders [col] outside [tables] as a plain span, inside as td', () => {
       const doc = new BBCodeDocumentModel({
         source: `[columns=2][col]Left[/col][col]Right[/col][/columns]

package/src/Visitors/HTMLRenderer.ts

@@ -38,14 +38,21 @@ export interface HTMLRendererOptions {
    * linkify `@username` to a profile route.
    */
   mentionResolver?: (name: string) => { href: string; external?: boolean } | null
+  /**
+   * Timestamp chip linkifier (`1:23`, `01:23.456`, `01:23:456`). Called with
+   * the millisecond offset and the display label; return null to leave the
+   * timestamp as plain text. Used by map hosts that deep-link into an editor.
+   */
+  timestampResolver?: (ms: number, label: string) => { href: string; external?: boolean } | null
 }
 
 export class HTMLRenderer extends Visitor<string> {
-  private options: Required<Omit<HTMLRendererOptions, 'registry' | 'mediaProxy' | 'entityLinkResolver' | 'mentionResolver'>> & {
+  private options: Required<Omit<HTMLRendererOptions, 'registry' | 'mediaProxy' | 'entityLinkResolver' | 'mentionResolver' | 'timestampResolver'>> & {
     registry?: TagRegistry
     mediaProxy?: (url: string) => string
     entityLinkResolver?: (kind: string, value: string) => { href: string; external?: boolean } | null
     mentionResolver?: (name: string) => { href: string; external?: boolean } | null
+    timestampResolver?: (ms: number, label: string) => { href: string; external?: boolean } | null
   }
 
   constructor(options: HTMLRendererOptions = {}) {
@@ -58,6 +65,7 @@ export class HTMLRenderer extends Visitor<string> {
       mediaProxy: options.mediaProxy,
       entityLinkResolver: options.entityLinkResolver,
       mentionResolver: options.mentionResolver,
+      timestampResolver: options.timestampResolver,
     }
   }
 
@@ -235,8 +243,8 @@ export class HTMLRenderer extends Visitor<string> {
   private renderNode(node: RedNode): string {
     // Leaf nodes
     if (node.children.length === 0 && node.kind === 'text') {
-      let out = this.mentionResolver
-        ? this.linkifyMentions(node.text)
+      let out = this.mentionResolver || this.options.timestampResolver
+        ? this.linkifyText(node.text)
         : this.escapeHtml(node.text)
       const style = node.metadata?.style as Record<string, string> | undefined
       if (style) {
@@ -1089,25 +1097,28 @@ export class HTMLRenderer extends Visitor<string> {
   private static readonly MENTION_RE = /(?<![A-Za-z0-9_-])@([A-Za-z0-9_-]{3,15})(?![A-Za-z0-9_-])/g
 
   /**
-   * Linkify `@username` runs in a plain-text leaf. Runs through the resolver;
-   * null leaves the run as text. Every interpolated string is HTML-escaped,
-   * and hrefs with dangerous protocols (javascript:, data:, vbscript:) are
-   * rejected — the mention stays as plain text even if the resolver returns
-   * one (defence in depth; the resolver itself should never produce it).
+   * Linkify a plain-text leaf: `@mention` runs and (optionally) timestamp
+   * chips. Both run through their resolver; null leaves the run as text.
+   * Every interpolated string is HTML-escaped, and hrefs with dangerous
+   * protocols (javascript:, data:, vbscript:) are rejected (defence in depth;
+   * the resolvers themselves should never produce one).
    */
-  private linkifyMentions(text: string): string {
-    const resolver = this.options.mentionResolver
-    if (!resolver) return this.escapeHtml(text)
+  private linkifyText(text: string): string {
+    const mentionResolver = this.options.mentionResolver
+    const timestampResolver = this.options.timestampResolver
+    if (!mentionResolver && !timestampResolver) return this.escapeHtml(text)
 
     let out = ''
     let last = 0
     HTMLRenderer.MENTION_RE.lastIndex = 0
     let m: RegExpExecArray | null
     while ((m = HTMLRenderer.MENTION_RE.exec(text)) !== null) {
-      if (m.index > last) out += this.escapeHtml(text.slice(last, m.index))
+      if (m.index > last) {
+        out += this.linkifyTimestamps(text.slice(last, m.index), timestampResolver)
+      }
       const name = m[1]
-      const link = resolver(name)
-      if (link && this.isSafeMentionHref(link.href)) {
+      const link = mentionResolver?.(name)
+      if (link && this.isSafeHref(link.href)) {
         const ext = link.external ? ' target="_blank" rel="noopener"' : ''
         out += `<a class="bb-mention" href="${this.escapeHtml(link.href)}"${ext}>@${this.escapeHtml(name)}</a>`
       } else {
@@ -1115,12 +1126,48 @@ export class HTMLRenderer extends Visitor<string> {
       }
       last = m.index + m[0].length
     }
+    if (last < text.length) {
+      out += this.linkifyTimestamps(text.slice(last), timestampResolver)
+    }
+    return out
+  }
+
+  /** `1:23`, `01:23.456`, `01:23:456` — the editor deep-link shape. */
+  private static readonly TS_RE = /\b(\d{1,2}):([0-5]\d)(?:\.(\d{1,3})\b|:(\d{1,3})\b)?/g
+
+  private linkifyTimestamps(text: string, resolver: ((ms: number, label: string) => { href: string; external?: boolean } | null) | undefined): string {
+    if (!resolver) return this.escapeHtml(text)
+
+    let out = ''
+    let last = 0
+    HTMLRenderer.TS_RE.lastIndex = 0
+    let m: RegExpExecArray | null
+    while ((m = HTMLRenderer.TS_RE.exec(text)) !== null) {
+      if (m.index > last) out += this.escapeHtml(text.slice(last, m.index))
+      const minutes = parseInt(m[1], 10)
+      const seconds = parseInt(m[2], 10)
+      const frac = m[3] ? parseInt(m[3].padEnd(3, '0'), 10) : m[4] ? parseInt(m[4], 10) : 0
+      const ms = (minutes * 60 + seconds) * 1000 + frac
+      const label = m[4]
+        ? `${m[1].padStart(2, '0')}:${m[2]}:${m[4].padStart(3, '0')}`
+        : m[3]
+          ? `${m[1]}:${m[2]}.${m[3]}`
+          : `${m[1]}:${m[2]}`
+      const link = resolver(ms, label)
+      if (link && this.isSafeHref(link.href)) {
+        const ext = link.external ? ' target="_blank" rel="noopener"' : ''
+        out += `<a class="bb-timeref" href="${this.escapeHtml(link.href)}"${ext}>${this.escapeHtml(label)}</a>`
+      } else {
+        out += this.escapeHtml(m[0])
+      }
+      last = m.index + m[0].length
+    }
     if (last < text.length) out += this.escapeHtml(text.slice(last))
     return out
   }
 
   /** Root-relative, http(s), mailto and line:// hrefs are the only safe shapes. */
-  private isSafeMentionHref(href: string): boolean {
+  private isSafeHref(href: string): boolean {
     const h = href.trim()
     if (h.startsWith('/') && !h.startsWith('//')) return true
     return /^(https?:|mailto:|line:)/i.test(h)

package/src/Visuals/lyne.css

@@ -59,6 +59,29 @@
   font-weight: 600 !important;
 }
 
+/* Editor timestamp chips (map surfaces) — the 45°-cut accent chip, same
+   geometry as the forum's refChip. */
+.bbcode-preview-lyne a.bb-timeref,
+.bbcode-preview.theme-lyne a.bb-timeref {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--font-numeric, "IBM Plex Mono", monospace) !important;
+  font-size: 0.5625rem !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--color-accent, #2EE6E2) !important;
+  background: rgb(46 230 226 / 0.08) !important;
+  border: 1px solid rgb(46 230 226 / 0.4) !important;
+  padding: 4px 10px;
+  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
+  text-decoration: none !important;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin: 0 2px;
+}
+
 /* ─── 45° Cut Panels ────────────────────────────────────────────────────── */
 
 .bb-cut-panel {
@@ -100,35 +123,35 @@
 .bbcode-preview.theme-lyne .notice,
 .bb-notice {
   display: block !important;
-  background: rgba(255, 195, 77, 0.08) !important;
-  border: 1px solid rgba(255, 195, 77, 0.4) !important;
+  background: rgba(46, 230, 226, 0.08);
+  border: 1px solid rgba(46, 230, 226, 0.4);
+  border-left: 3px solid #2EE6E2;
   border-radius: 0 !important;
   padding: 13px 16px !important;
   margin: 0 !important;
   font-size: 0.8125rem !important;
   line-height: 1.55 !important;
-  color: rgb(255, 224, 163) !important;
+  color: rgba(46, 230, 226, 0.95);
   white-space: normal !important;
   clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
   width: 100% !important;
   box-sizing: border-box !important;
 }
 
-/* Especificidad 0,2,0 (igual a `.bbcode-preview-lyne .notice`) para que el
-   `display:flex` gane sobre el `display:block` de la regla base del notice;
-   con un selector de clase simple (0,1,0) el símbolo quedaba ARRIBA del texto. */
 .bbcode-preview-lyne .bb-wnotice,
 .bbcode-preview.theme-lyne .bb-wnotice,
 .bb-notice.bb-wnotice {
   display: flex !important;
   gap: 12px !important;
   align-items: flex-start !important;
-  border-color: rgba(255, 195, 77, 0.6) !important;
-  background: rgba(255, 195, 77, 0.12) !important;
+  background: rgba(255, 195, 77, 0.08);
+  border: 1px solid rgba(255, 195, 77, 0.4);
+  border-left: 3px solid #FFC34D;
+  color: rgb(255, 224, 163);
 }
 
 .bb-notice-mark {
-  color: var(--color-warning, #FFC34D) !important;
+  color: var(--color-warning, #FFC34D);
   font-size: 0.9375rem !important;
   flex: 0 0 auto !important;
   margin-top: 1px !important;