@sakura-ui/sakura-ui 0.5.1 → 0.5.2

package/packages/markdown/src/marked/directives/card.ts

@@ -0,0 +1,77 @@
+import { styles } from '@sakura-ui/core'
+import { classNames, cleanUrl } from '../html'
+import type { DirectiveRenderer } from './context'
+
+const cardImgClass = classNames(styles.cardImgStyle, 'w-full aspect-[352/226]')
+
+const iconHtml = (name: string, altText: string): string =>
+  `<span aria-hidden="true" class="${classNames(
+    styles.iconSizeStyle[16],
+    styles.iconStyle
+  )}">${name}</span><span class="sr-only">${altText}</span>`
+
+export const cardRenderers: Record<string, DirectiveRenderer> = {
+  card: ({ token, attrs, root, body, nl }) => {
+    // The tokenizer withholds linked from a card with no title, which has no
+    // link to give and so must not look as though it had one.
+    const isLink = Boolean(token.linked)
+    const cls = classNames(
+      styles.cardStyle,
+      isLink && styles.linkCardPositionStyle,
+      isLink && styles.linkCardHoverStyle,
+      isLink && styles.linkCardFocusStyle,
+      attrs.class
+    )
+    const card = `<div${root({ class: cls })}>${body()}</div>`
+    // A card in a grid of cards is one of a list; the tokenizer says which.
+    return token.listed ? `<li class="sm:grid">${card}</li>${nl}` : `${card}${nl}`
+  },
+
+  'card-img': ({ attrs, root, nl }) =>
+    `<img${root({
+      class: classNames(cardImgClass, attrs.class),
+      src: cleanUrl(attrs.src),
+      alt: attrs.alt ?? ''
+    })}>${nl}`,
+
+  'card-title': ({ token, attrs, root, own, body, nl, options }) => {
+    const tag = options.cardHeadingLevel
+    const href = token.inherited ? cleanUrl(token.inherited.href) : undefined
+    if (href) {
+      // The anchor covers the card from here, so the title is the whole of the
+      // name the link is read out under.
+      return `<${tag}${root({
+        class: classNames(styles.cardHeaderStyle, styles.linkCardHeadingStyle)
+      })}><a${own({
+        class: classNames(styles.linkCardOverlayStyle),
+        href
+      })}>${body()}</a></${tag}>${nl}`
+    }
+    return `<${tag}${root({
+      class: classNames(styles.cardHeaderStyle, attrs.class)
+    })}>${body()}</${tag}>${nl}`
+  },
+
+  'card-description': ({ attrs, root, body, nl }) =>
+    `<div${root({
+      class: classNames(styles.cardBodyStyle, attrs.class)
+    })}>${body()}</div>${nl}`,
+
+  'card-footer': ({ token, attrs, root, body, nl }) => {
+    const isLink = Boolean(token.inherited)
+    const cls = classNames(
+      styles.cardFooterPositionStyle,
+      styles.cardBodyStyle,
+      isLink && styles.linkCardFooterStyle,
+      attrs.class
+    )
+    if (isLink) {
+      const arrow = `<span class="${classNames(
+        styles.linkCardArrowStyle,
+        styles.linkCardArrowHoverStyle
+      )}">${iconHtml('arrow_forward', '')}</span>`
+      return `<div${root({ class: cls })}><span>${body()}</span>${arrow}</div>${nl}`
+    }
+    return `<div${root({ class: cls })}>${body()}</div>${nl}`
+  }
+}

package/packages/markdown/src/marked/directives/context.ts

@@ -0,0 +1,39 @@
+import type { Token } from 'marked'
+import type { Attrs } from '../attributes'
+import type { AttrValue } from '../html'
+import type { DirectiveToken } from '../tokenizer'
+
+export interface Parser {
+  parse: (tokens: Token[]) => string
+  parseInline: (tokens: Token[], renderer?: unknown) => string
+  textRenderer: unknown
+}
+
+export interface RendererOptions {
+  /** The element a card title renders as, already shifted. */
+  cardHeadingLevel: string
+}
+
+type Values = Record<string, AttrValue>
+
+/**
+ * What each renderer is handed.
+ *
+ * `root` and `own` differ in one thing: `root` adds the id asked for by
+ * `{#name}`. It belongs on the element the directive **is**, and `own` on
+ * anything nested inside that, or the id would be written twice.
+ */
+export interface DirectiveContext {
+  token: DirectiveToken
+  attrs: Attrs
+  /** A newline after a block directive, nothing after an inline one. */
+  nl: string
+  root: (values: Values) => string
+  own: (values: Values) => string
+  /** The children, rendered — inline for a leaf, block for a container. */
+  body: () => string
+  parser: Parser
+  options: RendererOptions
+}
+
+export type DirectiveRenderer = (context: DirectiveContext) => string

package/packages/markdown/src/marked/directives/faq.ts

@@ -0,0 +1,29 @@
+import { styles } from '@sakura-ui/core'
+import { classNames } from '../html'
+import type { DirectiveRenderer } from './context'
+
+/**
+ * A description list, which is what a run of questions and answers is. The Q
+ * and the A are decoration and are hidden from a screen reader, which is told
+ * the same thing by the <dt> and <dd>.
+ *
+ * No schema.org FAQPage markup here. Google discontinued the FAQ rich result in
+ * May 2026, so it is not implemented.
+ */
+export const faqRenderers: Record<string, DirectiveRenderer> = {
+  faq: ({ root, body, nl }) =>
+    `<dl${root({ class: classNames(styles.faqStyle) })}>${body()}</dl>${nl}`,
+
+  'faq-q': ({ root, body, nl }) =>
+    `<dt${root({
+      class: classNames(styles.questionStyle, styles.faqMarkerStyle)
+    })}><span aria-hidden="true">Q</span><span>${body()}</span></dt>${nl}`,
+
+  'faq-a': ({ root, body, nl }) =>
+    `<dd${root({
+      class: classNames(styles.answerStyle)
+    })}><span class="${classNames(
+      styles.faqMarkerStyle,
+      '!leading-none'
+    )}" aria-hidden="true">A</span><span>${body()}</span></dd>${nl}`
+}

package/packages/markdown/src/marked/directives/grid.ts

@@ -0,0 +1,50 @@
+import { classNames, cleanUrl } from '../html'
+import type { DirectiveRenderer } from './context'
+
+/**
+ * Beyond six the columns are too narrow to read, so 7 through 11 stop there.
+ * Twelve is kept because it is the grid people reach for when they are dividing
+ * a row rather than listing things.
+ */
+const GRID_CLASS: Record<number, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  7: 'md:grid-cols-6',
+  8: 'md:grid-cols-6',
+  9: 'md:grid-cols-6',
+  10: 'md:grid-cols-6',
+  11: 'md:grid-cols-6',
+  12: 'md:grid-cols-12'
+}
+
+/**
+ * `grid-cols-N` for any N the registry allows. A grid of cards is a `<ul>` and
+ * anything else a `<div>`; the tokenizer decides which, because by the time the
+ * children are rendered they are one string with no seams.
+ */
+export const grid: DirectiveRenderer = ({ token, root, body, nl }) => {
+  const columns = Number(token.name.slice('grid-cols-'.length))
+  const cls = classNames(
+    'flex flex-col md:grid',
+    GRID_CLASS[columns],
+    'gap-8'
+  )
+  const tag = token.listed ? 'ul' : 'div'
+  return `<${tag}${root({ class: cls })}>${body()}</${tag}>${nl}`
+}
+
+export const cellRenderers: Record<string, DirectiveRenderer> = {
+  cell: ({ attrs, root, body, nl }) =>
+    `<div${root({ class: attrs.class })}>${body()}</div>${nl}`,
+
+  'cell-img': ({ attrs, root, nl }) =>
+    `<img${root({
+      class: classNames('mb-4', attrs.class),
+      src: cleanUrl(attrs.src),
+      alt: attrs.alt ?? ''
+    })}>${nl}`
+}

package/packages/markdown/src/marked/directives/index.ts

@@ -0,0 +1,29 @@
+import { GRID_RE } from '../registry'
+import { cardRenderers } from './card'
+import type { DirectiveRenderer } from './context'
+import { faqRenderers } from './faq'
+import { cellRenderers, grid } from './grid'
+import { linkButtonRenderers } from './linkButton'
+import { youtubeRenderers } from './youtube'
+
+const BY_NAME: Record<string, DirectiveRenderer> = {
+  ...cardRenderers,
+  ...cellRenderers,
+  ...faqRenderers,
+  ...youtubeRenderers,
+  ...linkButtonRenderers
+}
+
+/**
+ * `grid-cols-N` is the one name that is not a name but a shape, so it is looked
+ * for after the others rather than listed among them.
+ */
+export const findRenderer = (name: string): DirectiveRenderer | undefined =>
+  BY_NAME[name] ?? (GRID_RE.test(name) ? grid : undefined)
+
+export type {
+  DirectiveContext,
+  DirectiveRenderer,
+  Parser,
+  RendererOptions
+} from './context'

package/packages/markdown/src/marked/directives/linkButton.ts

@@ -0,0 +1,20 @@
+import { styles } from '@sakura-ui/core'
+import { classNames, cleanUrl } from '../html'
+import type { DirectiveRenderer } from './context'
+
+const linkButtonClass = classNames(
+  styles.buttonBaseStyle,
+  styles.getButtonVariantStyle('secondary'),
+  styles.getButtonSizeStyle('lg')
+)
+
+/**
+ * Written inline, so it takes no newline after it — it sits in a sentence.
+ */
+export const linkButtonRenderers: Record<string, DirectiveRenderer> = {
+  'link-button': ({ attrs, root, body }) =>
+    `<a${root({
+      class: linkButtonClass,
+      href: cleanUrl(attrs.href)
+    })}>${body()}</a>`
+}

package/packages/markdown/src/marked/directives/youtube.ts

@@ -0,0 +1,46 @@
+import type { DirectiveRenderer } from './context'
+
+/**
+ * Fixed rather than taken from the document. What an embedded frame may reach
+ * for, and how much of the address it hands to the other end, are the page's to
+ * settle; the person writing the prose is not the one to ask.
+ */
+const ALLOW =
+  'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+const REFERRER_POLICY = 'strict-origin-when-cross-origin'
+
+/**
+ * The video, from its id or from any of the addresses a writer has to hand —
+ * the watch page, the share link, an embed already written, a short. An id is
+ * eleven characters of that alphabet, which is what tells one from the other.
+ *
+ * Anything else is handed on as it came: a video that does not exist says so
+ * where it would have played, and a directive that rendered nothing would not.
+ */
+const ID = /^[\w-]{11}$/
+const ID_IN_URL = /(?:youtu\.be\/|[?&]v=|\/embed\/|\/shorts\/)([\w-]{11})/
+
+const videoId = (value: string | undefined): string => {
+  if (!value) return ''
+  if (ID.test(value)) return value
+  return ID_IN_URL.exec(value)?.[1] ?? value
+}
+
+export const youtubeRenderers: Record<string, DirectiveRenderer> = {
+  youtube: ({ token, attrs, root, nl, parser }) => {
+    // The label, as text: it becomes the frame's title, which is the name a
+    // screen reader reads the embed out under.
+    const title = parser.parseInline(token.tokens, parser.textRenderer)
+    return `<iframe${root({
+      title,
+      src: `https://www.youtube-nocookie.com/embed/${encodeURIComponent(videoId(attrs.video))}`,
+      class: 'aspect-video w-full max-w-[470px]',
+      style: attrs.width ? `width:${attrs.width}px` : undefined,
+      frameborder: '0',
+      allow: ALLOW,
+      referrerpolicy: REFERRER_POLICY,
+      allowfullscreen: true,
+      loading: 'lazy'
+    })}></iframe>${nl}`
+  }
+}

package/packages/markdown/src/marked/html.ts

@@ -0,0 +1,55 @@
+const ESCAPES: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;'
+}
+
+export const escapeHtml = (value: unknown): string =>
+  String(value).replace(/[&<>"']/g, (c) => ESCAPES[c] ?? c)
+
+/**
+ * Takes control characters out by code point rather than by pattern. A tab or a
+ * newline placed between the letters hides the scheme from a reader while the
+ * browser still follows it, and a regular expression holding those characters
+ * is refused by the linter either way.
+ */
+const stripControl = (value: string): string =>
+  Array.from(value)
+    .filter((char) => {
+      const code = char.codePointAt(0) ?? 0
+      return code > 0x1f && code !== 0x7f
+    })
+    .join('')
+
+/**
+ * Rejects the schemes that turn a link into script. marked keeps its own
+ * version of this to itself, so a renderer writing href or src has to bring one.
+ */
+export const cleanUrl = (href: string | undefined): string | undefined => {
+  if (href == null || href === '') return undefined
+  const trimmed = stripControl(String(href)).trim()
+  if (/^(?:javascript|vbscript|file):/i.test(trimmed)) return undefined
+  // Images written as data: used to be kept here and dropped nowhere, since
+  // DOMPurify allows the scheme on an img whatever ALLOWED_URI_REGEXP says. The
+  // content has no use for it, so both this and the sanitiser refuse it now.
+  if (/^data:/i.test(trimmed)) return undefined
+  return trimmed
+}
+
+export type AttrValue = string | boolean | undefined | null
+
+/** `{a: 'x', b: true, c: undefined}` becomes ` a="x" b` */
+export const attrsToHtml = (attrs: Record<string, AttrValue>): string =>
+  Object.entries(attrs)
+    .filter(([, v]) => v !== undefined && v !== null && v !== false && v !== '')
+    .map(([k, v]) => (v === true ? ` ${k}` : ` ${k}="${escapeHtml(v)}"`))
+    .join('')
+
+/**
+ * Turns the multi-line class strings the components use into a single line, so
+ * that the markup this package produces does not carry their indentation.
+ */
+export const classNames = (...values: (string | undefined | false)[]): string =>
+  values.filter(Boolean).join(' ').split(/\s+/).filter(Boolean).join(' ')

package/packages/markdown/src/marked/index.ts

@@ -0,0 +1,45 @@
+import type { MarkedExtension, Tokens } from 'marked'
+import { directiveRenderer, type RendererOptions } from './renderer'
+import {
+  blockStart,
+  blockTokenizer,
+  type DirectiveToken,
+  inlineStart,
+  inlineTokenizer
+} from './tokenizer'
+
+export type { DirectiveToken } from './tokenizer'
+export type { RendererOptions } from './renderer'
+
+/**
+ * The `:::name` syntax, as a marked extension.
+ *
+ * Both levels register under the same name because marked looks the renderer up
+ * by the token type, so a second name would mean a second renderer saying the
+ * same thing.
+ */
+export const directiveExtension = (
+  options: RendererOptions
+): MarkedExtension => ({
+  extensions: [
+    {
+      name: 'directive',
+      level: 'inline',
+      start: inlineStart,
+      tokenizer: inlineTokenizer
+    },
+    {
+      name: 'directive',
+      level: 'block',
+      start: blockStart,
+      tokenizer: blockTokenizer,
+      renderer(token: Tokens.Generic) {
+        return directiveRenderer.call(
+          this as never,
+          token as DirectiveToken,
+          options
+        )
+      }
+    }
+  ]
+})

package/packages/markdown/src/marked/registry.ts

@@ -0,0 +1,34 @@
+export const CONTAINER = 'container'
+export const LEAF = 'leaf'
+export const TEXT = 'text'
+
+export type DirectiveKind = typeof CONTAINER | typeof LEAF | typeof TEXT
+
+/**
+ * The whitelist. A name that is not here is not a directive, and the text
+ * carrying it is left alone.
+ *
+ * The remark pipeline this replaces turned any name into a tag of the same
+ * name, so ordinary prose lost characters: "HH:MM" rendered as "HH", and
+ * "chat:write" as "chat".
+ */
+const STATIC: Record<string, DirectiveKind[]> = {
+  card: [CONTAINER],
+  'card-img': [LEAF],
+  'card-title': [LEAF, CONTAINER],
+  'card-description': [LEAF, CONTAINER],
+  'card-footer': [LEAF, CONTAINER],
+  faq: [CONTAINER],
+  'faq-q': [LEAF, CONTAINER],
+  'faq-a': [LEAF, CONTAINER],
+  cell: [CONTAINER],
+  'cell-img': [LEAF],
+  youtube: [LEAF, CONTAINER],
+  'link-button': [TEXT]
+}
+
+/** The one directive whose name carries a number. Shared with the renderer. */
+export const GRID_RE = /^grid-cols-(?:1[0-2]|[1-9])$/
+
+export const isKnown = (name: string, kind: DirectiveKind): boolean =>
+  GRID_RE.test(name) ? kind === CONTAINER : (STATIC[name] ?? []).includes(kind)

package/packages/markdown/src/marked/renderer.ts

@@ -0,0 +1,52 @@
+import { ANCHOR } from './attributes'
+import { attrsToHtml } from './html'
+import { CONTAINER, TEXT } from './registry'
+import type { DirectiveToken } from './tokenizer'
+import {
+  type DirectiveContext,
+  findRenderer,
+  type Parser,
+  type RendererOptions
+} from './directives'
+
+/**
+ * Builds what a directive renderer is given, then hands the token to the one
+ * that knows it. The renderers themselves live in `directives/`, a file to a
+ * feature: `card.ts` holds the card and everything written inside one, because
+ * a title has to know whether the card gave it an href.
+ *
+ * A name with no renderer falls through to its own children, which is what a
+ * directive the registry allows but nobody has drawn yet looks like.
+ */
+export function directiveRenderer(
+  this: { parser: Parser },
+  token: DirectiveToken,
+  options: RendererOptions
+): string {
+  const { name, kind, attrs, tokens } = token
+  const nl = kind === TEXT ? '' : '\n'
+
+  // Marks what the directive dressed itself, so that the pass which styles the
+  // rest of the document leaves it alone.
+  const own: DirectiveContext['own'] = (values) =>
+    attrsToHtml({ ...values, 'data-sakura': name })
+
+  const context: DirectiveContext = {
+    token,
+    attrs,
+    nl,
+    own,
+    root: (values) => own({ ...values, id: attrs[ANCHOR] }),
+    body: () =>
+      kind === CONTAINER
+        ? this.parser.parse(tokens)
+        : this.parser.parseInline(tokens),
+    parser: this.parser,
+    options
+  }
+
+  const render = findRenderer(name)
+  return render ? render(context) : context.body() + nl
+}
+
+export type { RendererOptions } from './directives'

package/packages/markdown/src/marked/tokenizer.ts

@@ -0,0 +1,175 @@
+import type { Token, Tokens } from 'marked'
+import { type Attrs, readTail } from './attributes'
+import { CONTAINER, type DirectiveKind, isKnown, LEAF, TEXT } from './registry'
+
+export interface DirectiveToken extends Tokens.Generic {
+  type: 'directive'
+  kind: DirectiveKind
+  name: string
+  attrs: Attrs
+  tokens: Token[]
+  raw: string
+  /** A link card puts its href on the title; the tokenizer copies it down. */
+  inherited?: { behavior: 'link'; href: string }
+  /** Set on a card once it is known to have a title to put its link on. */
+  linked?: boolean
+  /** Set on a grid of cards, and on each of the cards in it. */
+  listed?: boolean
+}
+
+const BLOCK_HEAD = /^(:{2,})([A-Za-z][A-Za-z0-9_-]*)/
+const INLINE_HEAD = /^:([A-Za-z][A-Za-z0-9_-]*)/
+
+/**
+ * The closing fence is the first line made only of at least as many colons as
+ * the opening one. Nesting needs no bookkeeping: an inner directive uses fewer
+ * colons, so it cannot be mistaken for the close of the outer one.
+ */
+const findClose = (
+  body: string,
+  fenceLength: number
+): { contentEnd: number; rawEnd: number } | null => {
+  const re = new RegExp(`^:{${fenceLength},}[ \\t]*$`)
+  let offset = 0
+  for (const line of body.split('\n')) {
+    if (re.test(line)) {
+      return {
+        contentEnd: offset,
+        rawEnd: Math.min(offset + line.length + 1, body.length)
+      }
+    }
+    offset += line.length + 1
+  }
+  return null
+}
+
+/**
+ * marked passes src.slice(1) to start() and clips the paragraph it was about to
+ * take at the returned index plus one, so what is wanted here is the position of
+ * the newline before the directive. Without it a directive following a
+ * paragraph is swallowed by that paragraph.
+ */
+export const blockStart = (src: string): number | undefined => {
+  const m = /\n:{2,}[A-Za-z]/.exec(src)
+  return m ? m.index : undefined
+}
+
+export const inlineStart = (src: string): number | undefined => {
+  const m = /:[A-Za-z][A-Za-z0-9_-]*\[/.exec(src)
+  return m ? m.index : undefined
+}
+
+/**
+ * A grid of cards is a list. The cards are things of one kind, and how many
+ * there are is part of what the page says; a grid holding anything else, or
+ * cards and something else together, is a layout — prose beside a figure is not
+ * two of something. Nothing is written to ask for this, the way nothing is
+ * written to ask a run of "- " for a <ul>.
+ *
+ * Marked here rather than worked out while rendering, because by then the
+ * children have become one string and the boundaries between them are gone.
+ */
+const markCardList = (token: DirectiveToken): void => {
+  if (!/^grid-cols-\d+$/.test(token.name)) return
+  const children = token.tokens.filter((child) => child.type !== 'space')
+  const cards = children.filter(
+    (child): child is DirectiveToken =>
+      child.type === 'directive' && (child as DirectiveToken).name === 'card'
+  )
+  if (cards.length === 0 || cards.length !== children.length) return
+  token.listed = true
+  for (const card of cards) card.listed = true
+}
+
+/**
+ * A card with an href is a link card; there is nothing else an href on a card
+ * could mean, so it is not also asked for by name. The href belongs on the
+ * title, and the footer needs to know it is one. A card with no title has
+ * nowhere to put the link, so it is left as a plain card rather than dressed as
+ * something that answers to a click.
+ */
+const propagateCardLink = (token: DirectiveToken): void => {
+  if (token.name !== 'card' || !token.attrs.href) return
+  const children = token.tokens as DirectiveToken[]
+  const hasTitle = children.some(
+    (child) => child.type === 'directive' && child.name === 'card-title'
+  )
+  if (!hasTitle) return
+  token.linked = true
+  for (const child of children) {
+    if (child.type !== 'directive') continue
+    if (child.name === 'card-title' || child.name === 'card-footer') {
+      child.inherited = { behavior: 'link', href: token.attrs.href ?? '' }
+    }
+  }
+}
+
+export function blockTokenizer(
+  this: {
+    lexer: {
+      blockTokens: (src: string) => Token[]
+      inline: (src: string, tokens: Token[]) => void
+    }
+  },
+  src: string
+): DirectiveToken | undefined {
+  const head = BLOCK_HEAD.exec(src)
+  if (!head) return undefined
+  const [, fence, name] = head
+  const kind = fence.length >= 3 ? CONTAINER : LEAF
+  if (!isKnown(name, kind)) return undefined
+
+  const tail = readTail(src, head[0].length)
+  const eol = /^[ \t]*(?:\n|$)/.exec(src.slice(tail.end))
+  if (!eol) return undefined
+  const openLength = tail.end + eol[0].length
+
+  const token: DirectiveToken = {
+    type: 'directive',
+    kind,
+    name,
+    attrs: tail.attrs,
+    tokens: [],
+    raw: src.slice(0, openLength)
+  }
+
+  if (kind === LEAF) {
+    // Queued rather than tokenized now: marked drains the inline queue after the
+    // whole block pass, which is what lets a link reference defined further down
+    // the document resolve.
+    if (tail.label) this.lexer.inline(tail.label, token.tokens)
+    return token
+  }
+
+  const body = src.slice(openLength)
+  const close = findClose(body, fence.length)
+  token.raw = src.slice(0, openLength + (close ? close.rawEnd : body.length))
+  token.tokens = this.lexer.blockTokens(
+    close ? body.slice(0, close.contentEnd) : body
+  )
+  propagateCardLink(token)
+  markCardList(token)
+  return token
+}
+
+export function inlineTokenizer(
+  this: { lexer: { inlineTokens: (src: string) => Token[] } },
+  src: string
+): DirectiveToken | undefined {
+  const head = INLINE_HEAD.exec(src)
+  if (!head) return undefined
+  const [, name] = head
+  if (!isKnown(name, TEXT)) return undefined
+
+  const tail = readTail(src, head[0].length)
+  if (tail.label === null) return undefined
+
+  return {
+    type: 'directive',
+    kind: TEXT,
+    name,
+    attrs: tail.attrs,
+    tokens: this.lexer.inlineTokens(tail.label),
+    raw: src.slice(0, tail.end)
+  }
+}