@birdapi/velinstyle 0.7.0 → 0.9.0

package/core/attributes/registry.js

@@ -0,0 +1,268 @@
+import { lazyDefine } from '../../components/runtime/index.js';
+import { initMotion } from '../motion/index.js';
+
+/** @type {Map<string, { enhance: (el: HTMLElement) => void|Promise<void> }>} */
+const registry = new Map();
+
+export function registerAttribute(name, handler) {
+  registry.set(name, handler);
+}
+
+export function getAttributeHandler(name) {
+  return registry.get(name);
+}
+
+function bridgeComponent(el, tag, attrs = {}) {
+  el.setAttribute('data-velin-component', tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v != null) el.setAttribute(k, v);
+  }
+  return lazyDefine(tag);
+}
+
+function registerBuiltins() {
+  registerAttribute('velin-modal', {
+    enhance(el) {
+      bridgeComponent(el, 'velin-modal', { open: el.getAttribute('velin-modal') || '' });
+    },
+  });
+  registerAttribute('velin-tabs', { enhance: (el) => bridgeComponent(el, 'velin-tabs') });
+  registerAttribute('velin-accordion', { enhance: (el) => bridgeComponent(el, 'velin-accordion') });
+  registerAttribute('velin-tooltip', {
+    enhance(el) {
+      const tip = el.getAttribute('velin-tooltip') || el.getAttribute('title') || '';
+      if (tip && el.hasAttribute('title')) el.removeAttribute('title');
+      if (el.tagName === 'VELIN-TOOLTIP' || el.tagName === 'VELIN-TOOLTIP-WC') {
+        el.setAttribute('content', tip);
+        return lazyDefine('velin-tooltip');
+      }
+      const wc = document.createElement('velin-tooltip');
+      wc.setAttribute('content', tip);
+      const parent = el.parentElement;
+      if (parent) {
+        parent.insertBefore(wc, el);
+        wc.appendChild(el);
+      }
+      return lazyDefine('velin-tooltip');
+    },
+  });
+  registerAttribute('velin-copy', {
+    enhance(el) {
+      const text = el.getAttribute('velin-copy') || el.textContent?.trim() || '';
+      if (!el.querySelector('velin-copy')) {
+        const wc = document.createElement('velin-copy');
+        wc.setAttribute('value', text);
+        if (el.tagName === 'BUTTON') {
+          wc.append(...el.childNodes);
+          el.replaceWith(wc);
+          return lazyDefine('velin-copy');
+        }
+        el.appendChild(wc);
+      }
+      return lazyDefine('velin-copy');
+    },
+  });
+  registerAttribute('velin-counter', {
+    enhance(el) {
+      bridgeComponent(el, 'velin-counter', {
+        value: el.getAttribute('velin-counter') || '0',
+      });
+    },
+  });
+  registerAttribute('velin-notify', {
+    async enhance(el) {
+      await lazyDefine('velin-toast');
+      el.addEventListener('click', () => {
+        const msg = el.getAttribute('velin-notify') || el.textContent || '';
+        document.dispatchEvent(
+          new CustomEvent('velin-toast-show', { detail: { message: msg, variant: el.dataset.variant || 'info' } }),
+        );
+      });
+    },
+  });
+  registerAttribute('velin-theme', {
+    enhance(el) {
+      const theme = el.getAttribute('velin-theme') || 'toggle';
+      if (theme === 'toggle') {
+        if (!el.querySelector('velin-theme-toggle')) {
+          el.appendChild(document.createElement('velin-theme-toggle'));
+        }
+        return lazyDefine('velin-theme-toggle');
+      }
+      document.documentElement.setAttribute('data-velin-theme', theme);
+    },
+  });
+  registerAttribute('velin-scroll-top', {
+    enhance(el) {
+      const raw = el.getAttribute('velin-scroll-top');
+      const threshold = raw && raw !== 'true' ? raw : '300';
+      if (el.tagName === 'VELIN-SCROLL-TOP') {
+        if (raw && raw !== 'true') el.setAttribute('threshold', threshold);
+        return lazyDefine('velin-scroll-top');
+      }
+      let wc = document.querySelector('velin-scroll-top');
+      if (!wc) {
+        wc = document.createElement('velin-scroll-top');
+        wc.setAttribute('threshold', threshold);
+        (el === document.body || el === document.documentElement ? document.body : el).appendChild(wc);
+      }
+      return lazyDefine('velin-scroll-top');
+    },
+  });
+  registerAttribute('velin-progress', {
+    enhance(el) {
+      const ring = el.hasAttribute('ring');
+      if (ring) return bridgeComponent(el, 'velin-progress-ring');
+      el.classList.add('velin-progress');
+      const val = parseInt(el.getAttribute('velin-progress') || '0', 10);
+      el.setAttribute('role', 'progressbar');
+      el.setAttribute('aria-valuenow', String(val));
+      el.style.setProperty('--velin-progress', `${Math.min(100, val)}%`);
+    },
+  });
+  registerAttribute('velin-search', {
+    async enhance(el) {
+      if (el.tagName !== 'VELIN-SEARCH') {
+        const host = document.createElement('velin-search');
+        host.setAttribute('index', el.getAttribute('data-search-index') || '/search-index.json');
+        el.replaceWith(host);
+        host.appendChild(el);
+      }
+      return lazyDefine('velin-search');
+    },
+  });
+  registerAttribute('velin-lazy', {
+    enhance(el) {
+      if (el.tagName === 'IMG') {
+        el.loading = 'lazy';
+        el.decoding = 'async';
+        if (el.hasAttribute('velin-skeleton') || el.dataset.velinSkeleton) {
+          el.classList.add('velin-skeleton', 'velin-skeleton--image');
+          el.addEventListener('load', () => el.classList.remove('velin-skeleton', 'velin-skeleton--image'), { once: true });
+        }
+      }
+    },
+  });
+  registerAttribute('velin-skeleton', {
+    enhance(el) {
+      const variant = el.getAttribute('velin-skeleton') || 'text';
+      el.classList.add('velin-skeleton', `velin-skeleton--${variant}`);
+      const hasText = Boolean(el.textContent?.trim()) && el.children.length > 0;
+      if (!hasText && !el.textContent?.trim()) {
+        el.setAttribute('aria-hidden', 'true');
+      }
+    },
+  });
+  registerAttribute('velin-loading', {
+    enhance(el) {
+      el.classList.add('velin-spinner');
+      el.setAttribute('aria-busy', 'true');
+      el.setAttribute('role', 'status');
+      if (!el.getAttribute('aria-label')?.trim()) {
+        el.setAttribute('aria-label', 'Loading');
+      }
+    },
+  });
+  registerAttribute('velin-grid', {
+    enhance(el) {
+      const cols = el.getAttribute('velin-grid') || 'auto';
+      el.classList.add('velin-grid');
+      if (cols !== 'auto') el.style.setProperty('--velin-grid-cols', cols);
+    },
+  });
+  registerAttribute('velin-anchor', {
+    enhance(el) {
+      if (!el.id && el.getAttribute('velin-anchor')) el.id = el.getAttribute('velin-anchor');
+      el.setAttribute('tabindex', '-1');
+    },
+  });
+  registerAttribute('velin-code', {
+    async enhance(el) {
+      const lang =
+        el.getAttribute('velin-code') ||
+        el.getAttribute('language') ||
+        el.getAttribute('data-language') ||
+        '';
+      el.classList.add('velin-code-block');
+      if (lang && lang !== 'true') {
+        el.dataset.language = lang;
+        if (!el.getAttribute('language')) el.setAttribute('language', lang);
+      }
+      if (!el.querySelector('[data-velin-copy]')) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'velin-code-block__copy velin-btn velin-btn--sm';
+        btn.textContent = 'Copy';
+        btn.setAttribute('data-velin-copy', '');
+        btn.setAttribute('velin-copy', el.querySelector('code')?.textContent || el.textContent || '');
+        el.style.position = 'relative';
+        el.appendChild(btn);
+      }
+      await lazyDefine('velin-copy');
+
+      const { initHighlight, highlightElement } = await import('../highlight/index.js');
+      const immediate =
+        el.getAttribute('data-velin-highlight') === 'immediate' ||
+        (typeof matchMedia !== 'undefined' &&
+          matchMedia('(prefers-reduced-motion: reduce)').matches);
+      if (immediate) {
+        await highlightElement(el);
+      } else {
+        initHighlight(el, { root: el });
+      }
+    },
+  });
+  registerAttribute('velin-quote', {
+    enhance(el) {
+      if (el.tagName === 'BLOCKQUOTE' || el.tagName === 'Q') {
+        el.classList.add('velin-quote');
+      }
+    },
+  });
+  registerAttribute('velin-highlight', {
+    enhance(el) {
+      // Inline text mark (search/docs) — not syntax highlighting; see velinSyntax / velin-code
+      el.classList.add('velin-highlight');
+    },
+  });
+
+  for (const motion of ['velin-reveal', 'velin-fade', 'velin-slide', 'velin-scale', 'velin-parallax', 'velin-hover', 'velin-stagger', 'velin-scroll']) {
+    registerAttribute(motion, { enhance() {} });
+  }
+}
+
+registerBuiltins();
+
+const enhanced = new WeakSet();
+
+/**
+ * @param {ParentNode} [root]
+ */
+export async function bootAttributes(root = document) {
+  const selector = [...registry.keys()].map((a) => `[${a}]`).join(',');
+  const elements = root.querySelectorAll(selector);
+
+  for (const el of elements) {
+    if (enhanced.has(el)) continue;
+    for (const attr of registry.keys()) {
+      if (!el.hasAttribute(attr)) continue;
+      const handler = registry.get(attr);
+      if (handler?.enhance) await handler.enhance(el);
+    }
+    enhanced.add(el);
+  }
+
+  initMotion({ root });
+  if (typeof HTMLElement !== 'undefined') {
+    const { bindDeclarativeSearch } = await import('../../components/velin-search.js');
+    bindDeclarativeSearch(root);
+    if (!document.querySelector('velin-announcer')) {
+      const { getAnnouncer } = await import('../../components/a11y-utils.js');
+      getAnnouncer();
+    }
+  }
+}
+
+export function listRegisteredAttributes() {
+  return [...registry.keys()];
+}

package/core/highlight/highlight.js

@@ -0,0 +1,114 @@
+/** @import { LexerFn } from './types.js' */
+import { getLanguage, lazyLoadLanguage, normalizeLanguage } from './registry.js';
+import { applyHighlight } from './render.js';
+
+/**
+ * @param {Element} el
+ * @returns {string}
+ */
+export function resolveLanguage(el) {
+  const pre = el.tagName === 'PRE' ? el : el.closest('pre');
+  const code = el.tagName === 'CODE' ? el : pre?.querySelector('code') || el;
+  const host = pre || code;
+
+  const fromAttr =
+    host.getAttribute('language') ||
+    host.getAttribute('data-language') ||
+    host.getAttribute('velin-code') ||
+    '';
+
+  if (fromAttr && fromAttr !== 'true') return normalizeLanguage(fromAttr);
+
+  const cls = code?.className || '';
+  const langMatch = cls.match(/\blanguage-([\w-]+)\b/i);
+  if (langMatch) return normalizeLanguage(langMatch[1]);
+
+  return '';
+}
+
+/**
+ * @param {Element} el
+ * @returns {string}
+ */
+export function getSourceText(el) {
+  const code = el.tagName === 'CODE' ? el : el.querySelector('code');
+  const target = code || el;
+  if (target.dataset.velinSource != null) return target.dataset.velinSource;
+  const html = target.innerHTML;
+  if (html && /<|>|&/.test(html)) {
+    const ta = document.createElement('textarea');
+    ta.innerHTML = html.replace(/<br\s*\/?>/gi, '\n');
+    if (ta.value) return ta.value;
+  }
+  return target.textContent || '';
+}
+
+/**
+ * @param {Element} el
+ * @param {object} [options]
+ * @param {string} [options.language]
+ * @param {LexerFn} [options.lexer]
+ */
+export async function highlightElement(el, options = {}) {
+  if (el.dataset.velinHighlighted === '1') return;
+  const pre = el.tagName === 'PRE' ? el : el.closest('pre') || el;
+  const codeEl =
+    el.tagName === 'CODE' ? el : pre.querySelector('code') || document.createElement('code');
+
+  if (!pre.querySelector('code') && codeEl !== el) {
+    const text = getSourceText(pre);
+    codeEl.textContent = text;
+    pre.textContent = '';
+    pre.appendChild(codeEl);
+  }
+
+  if (!codeEl.dataset.velinSource) {
+    codeEl.dataset.velinSource = codeEl.textContent || '';
+  }
+
+  const lang = options.language || resolveLanguage(pre);
+  if (!lang) return;
+
+  pre.classList.add('velin-syntax-pending');
+  codeEl.classList.add('velin-syntax-pending');
+
+  let lexer = options.lexer || getLanguage(lang);
+  if (!lexer) lexer = await lazyLoadLanguage(lang);
+  if (!lexer) {
+    lexer = getLanguage('text') || (await lazyLoadLanguage('text'));
+  }
+
+  const source = codeEl.dataset.velinSource || getSourceText(codeEl) || '';
+  if (!lexer) {
+    codeEl.textContent = source;
+    pre.classList.remove('velin-syntax-pending');
+    codeEl.classList.remove('velin-syntax-pending');
+    pre.classList.add('velin-syntax-ready');
+    codeEl.classList.add('velin-syntax-ready');
+    return;
+  }
+
+  try {
+    const tokens = lexer(source);
+    applyHighlight(codeEl, tokens);
+    codeEl.dataset.velinHighlighted = '1';
+    pre.dataset.velinHighlighted = '1';
+  } catch (err) {
+    console.warn('[velin-highlight]', lang, err);
+    codeEl.textContent = source;
+  }
+  pre.classList.remove('velin-syntax-pending');
+  codeEl.classList.remove('velin-syntax-pending');
+  pre.classList.add('velin-syntax-ready');
+  codeEl.classList.add('velin-syntax-ready');
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export async function highlightAll(root = document) {
+  const blocks = root.querySelectorAll(
+    'pre[velin-code], pre[data-language], pre code[class*="language-"], [velin-code-block] pre, .velin-doc-example__code pre',
+  );
+  await Promise.all([...blocks].map((el) => highlightElement(el)));
+}

package/core/highlight/index.js

@@ -0,0 +1,29 @@
+export {
+  registerLanguage,
+  getLanguage,
+  lazyLoadLanguage,
+  listLanguages,
+  normalizeLanguage,
+} from './registry.js';
+export { escapeHtml, renderTokens, applyHighlight } from './render.js';
+export {
+  resolveLanguage,
+  getSourceText,
+  highlightElement,
+  highlightAll,
+} from './highlight.js';
+export { initHighlight, observeCodeBlocks } from './observe.js';
+
+import { highlightElement, highlightAll } from './highlight.js';
+import { initHighlight, observeCodeBlocks } from './observe.js';
+import { registerLanguage, lazyLoadLanguage, listLanguages } from './registry.js';
+
+export const velinSyntax = {
+  highlightElement,
+  highlightAll,
+  initHighlight,
+  observeCodeBlocks,
+  registerLanguage,
+  lazyLoadLanguage,
+  listLanguages,
+};

package/core/highlight/languages/_utils.js

@@ -0,0 +1,52 @@
+/** @import { Token } from '../types.js' */
+
+/**
+ * @param {string} code
+ * @param {Array<{ type: Token['type']; re: RegExp }>} rules
+ * @returns {Token[]}
+ */
+export function tokenize(code, rules) {
+  /** @type {Token[]} */
+  const tokens = [];
+  let i = 0;
+  while (i < code.length) {
+    let matched = false;
+    for (const { type, re } of rules) {
+      re.lastIndex = i;
+      const m = re.exec(code);
+      if (m && m.index === i) {
+        tokens.push({ type, value: m[0] });
+        i += m[0].length;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      const next = tokens[tokens.length - 1];
+      if (next?.type === 'plain') {
+        next.value += code[i];
+      } else {
+        tokens.push({ type: 'plain', value: code[i] });
+      }
+      i += 1;
+    }
+  }
+  return tokens;
+}
+
+/**
+ * @param {string} code
+ * @param {Record<string, string>} keywords
+ * @param {Array<{ type: Token['type']; re: RegExp }>} baseRules
+ */
+export function tokenizeWithKeywords(code, keywords, baseRules) {
+  const rules = [
+    ...baseRules,
+    {
+      type: 'keyword',
+      re: new RegExp(`\\b(${Object.keys(keywords).join('|')})\\b`, 'y'),
+    },
+    { type: 'identifier', re: /\b[A-Za-z_$][\w$]*\b/y },
+  ];
+  return tokenize(code, rules);
+}

package/core/highlight/languages/blade.js

@@ -0,0 +1,16 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /{{--[\s\S]*?--}}/y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'keyword', re: /@(?:vite|csrf|auth|guest|section|endsection|yield|extends|include|push|endpush|stack|once|endonce|forelse|empty|endempty|can|endcan|cannot|endcannot)\b/y },
+  { type: 'operator', re: /{{|}}|{!!|!!}|@[{}]/y },
+  { type: 'punctuation', re: /[()[\],]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexBlade(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/css.js

@@ -0,0 +1,26 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  important: 1,
+  inherit: 1,
+  initial: 1,
+  unset: 1,
+  revert: 1,
+};
+
+const RULES = [
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'number', re: /#[\da-fA-F]{3,8}\b|\b\d+(?:\.\d+)?(?:%|[a-z]+)?\b/y },
+  { type: 'tag', re: /\.[\w-]+|#[\w-]+/y },
+  { type: 'attr-name', re: /[\w-]+(?=\s*:)/y },
+  { type: 'punctuation', re: /[{}:;,()]/y },
+  { type: 'operator', re: /[+\-*/>~]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexCss(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, RULES);
+}

package/core/highlight/languages/html.js

@@ -0,0 +1,17 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /<!--[\s\S]*?-->/y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'tag', re: /<\/?[\w-]+/y },
+  { type: 'punctuation', re: /[<>/=]/y },
+  { type: 'attr-name', re: /\s[\w-]+(?==)/y },
+  { type: 'attr-value', re: /=(?:"[^"]*"|'[^']*'|[^\s>]+)/y },
+];
+
+/** @type {LexerFn} */
+export default function lexHtml(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/js.js

@@ -0,0 +1,58 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  const: 1,
+  let: 1,
+  var: 1,
+  function: 1,
+  return: 1,
+  if: 1,
+  else: 1,
+  for: 1,
+  while: 1,
+  do: 1,
+  switch: 1,
+  case: 1,
+  break: 1,
+  continue: 1,
+  new: 1,
+  class: 1,
+  extends: 1,
+  import: 1,
+  export: 1,
+  from: 1,
+  default: 1,
+  async: 1,
+  await: 1,
+  try: 1,
+  catch: 1,
+  finally: 1,
+  throw: 1,
+  typeof: 1,
+  instanceof: 1,
+  in: 1,
+  of: 1,
+  true: 1,
+  false: 1,
+  null: 1,
+  undefined: 1,
+  void: 1,
+  this: 1,
+};
+
+const BASE = [
+  { type: 'comment', re: /\/\/[^\n]*/y },
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'string', re: /`(?:\\.|[^`\\])*`/y },
+  { type: 'number', re: /\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/y },
+  { type: 'operator', re: /[+\-*/%=<>!&|^~?:]+/y },
+  { type: 'punctuation', re: /[{}[\]();,.]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexJs(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, BASE);
+}

package/core/highlight/languages/json.js

@@ -0,0 +1,14 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'number', re: /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/y },
+  { type: 'keyword', re: /\b(true|false|null)\b/y },
+  { type: 'punctuation', re: /[{}[\]:,]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexJson(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/markdown.js

@@ -0,0 +1,16 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /<!--[\s\S]*?-->/y },
+  { type: 'string', re: /```[\s\S]*?```/y },
+  { type: 'string', re: /`[^`\n]+`/y },
+  { type: 'keyword', re: /#{1,6}\s[^\n]+/y },
+  { type: 'tag', re: /\[[^\]]+\]\([^)]+\)/y },
+  { type: 'operator', re: /[*_~]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexMarkdown(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/php.js

@@ -0,0 +1,39 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  function: 1,
+  return: 1,
+  if: 1,
+  else: 1,
+  elseif: 1,
+  foreach: 1,
+  while: 1,
+  class: 1,
+  new: 1,
+  public: 1,
+  private: 1,
+  protected: 1,
+  static: 1,
+  namespace: 1,
+  use: 1,
+  true: 1,
+  false: 1,
+  null: 1,
+};
+
+const RULES = [
+  { type: 'comment', re: /\/\/[^\n]*/y },
+  { type: 'comment', re: /#[^\n]*/y },
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'number', re: /\b\d+(?:\.\d+)?\b/y },
+  { type: 'operator', re: /=>|\+\+|--|===|!==|==|!=|<=|>=|->|\?\?|[=+\-*/%.<>!&|^~?:]/y },
+  { type: 'punctuation', re: /[{}[\]();,.]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexPhp(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, RULES);
+}

package/core/highlight/languages/plain.js

@@ -0,0 +1,7 @@
+/** @import { LexerFn } from '../types.js' */
+
+/** @type {LexerFn} */
+export default function lexPlain(code) {
+  if (!code) return [];
+  return [{ type: 'plain', value: code }];
+}