@csntgao/uni-base 0.1.0

package/packages/web-components/src/prototype-icons.ts

@@ -0,0 +1,242 @@
+import { html, svg, type TemplateResult } from 'lit'
+
+/**
+ * Exact SVG geometry from the Tabler Icons 2.47.0 assets used by the 40.1 prototype.
+ * Source: https://github.com/tabler/tabler-icons/tree/v2.47.0/icons
+ */
+export type PrototypeIconName =
+  | 'alert-circle'
+  | 'alert-triangle'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'bell'
+  | 'building'
+  | 'chevron-down'
+  | 'chevron-right'
+  | 'circle-check-filled'
+  | 'clock-exclamation'
+  | 'clock-hour-4'
+  | 'clipboard-check'
+  | 'coin'
+  | 'discount-check'
+  | 'discount-check-filled'
+  | 'headset'
+  | 'id-badge-2'
+  | 'layout-grid'
+  | 'logout'
+  | 'messages'
+  | 'mail-check'
+  | 'message-2'
+  | 'plus'
+  | 'robot'
+  | 'selector'
+  | 'speakerphone'
+  | 'user-cog'
+  | 'users'
+  | 'x'
+
+export function prototypeIcon(name: PrototypeIconName): TemplateResult {
+  const content = prototypeIconContent(name)
+  return html`<svg
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-prototype-icon=${name}
+  >
+    ${content}
+  </svg>`
+}
+
+function prototypeIconContent(name: PrototypeIconName): TemplateResult {
+  if (name === 'layout-grid') {
+    return svg`
+      <path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+      <path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+      <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+      <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+    `
+  }
+  if (name === 'headset') {
+    return svg`
+      <path d="M4 14v-3a8 8 0 1 1 16 0v3" />
+      <path d="M18 19c0 1.657 -2.686 3 -6 3" />
+      <path d="M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
+      <path d="M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
+    `
+  }
+  if (name === 'robot') {
+    return svg`
+      <path d="M6 4m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
+      <path d="M12 2v2" />
+      <path d="M9 12v9" />
+      <path d="M15 12v9" />
+      <path d="M5 16l4 -2" />
+      <path d="M15 14l4 2" />
+      <path d="M9 18h6" />
+      <path d="M10 8v.01" />
+      <path d="M14 8v.01" />
+    `
+  }
+  if (name === 'messages') {
+    return svg`
+      <path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10" />
+      <path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" />
+    `
+  }
+  if (name === 'message-2') {
+    return svg`
+      <path d="M8 9h8" />
+      <path d="M8 13h6" />
+      <path d="M9 18h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-3l-3 3l-3 -3z" />
+    `
+  }
+  if (name === 'arrow-left') {
+    return svg`<path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" />`
+  }
+  if (name === 'arrow-right') {
+    return svg`<path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" />`
+  }
+  if (name === 'bell') {
+    return svg`
+      <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
+      <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
+    `
+  }
+  if (name === 'chevron-down') return svg`<path d="M6 9l6 6l6 -6" />`
+  if (name === 'chevron-right') return svg`<path d="M9 6l6 6l-6 6" />`
+  if (name === 'x') return svg`<path d="M18 6l-12 12" /><path d="M6 6l12 12" />`
+  if (name === 'selector') {
+    return svg`<path d="M8 9l4 -4l4 4" /><path d="M16 15l-4 4l-4 -4" />`
+  }
+  if (name === 'plus') return svg`<path d="M12 5l0 14" /><path d="M5 12l14 0" />`
+  if (name === 'logout') {
+    return svg`
+      <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
+      <path d="M9 12h12l-3 -3" />
+      <path d="M18 15l3 -3" />
+    `
+  }
+  if (name === 'users') {
+    return svg`
+      <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
+      <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+      <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
+    `
+  }
+  if (name === 'building') {
+    return svg`
+      <path d="M3 21l18 0" />
+      <path d="M9 8l1 0" />
+      <path d="M9 12l1 0" />
+      <path d="M9 16l1 0" />
+      <path d="M14 8l1 0" />
+      <path d="M14 12l1 0" />
+      <path d="M14 16l1 0" />
+      <path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16" />
+    `
+  }
+  if (name === 'clipboard-check') {
+    return svg`
+      <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
+      <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
+      <path d="M9 14l2 2l4 -4" />
+    `
+  }
+  if (name === 'coin') {
+    return svg`
+      <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+      <path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1" />
+      <path d="M12 7v10" />
+    `
+  }
+  if (name === 'discount-check') {
+    return svg`
+      <path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7c.412 .41 .97 .64 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58 .23 1.138 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1" />
+      <path d="M9 12l2 2l4 -4" />
+    `
+  }
+  if (name === 'mail-check') {
+    return svg`
+      <path d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6" />
+      <path d="M3 7l9 6l9 -6" />
+      <path d="M15 19l2 2l4 -4" />
+    `
+  }
+  if (name === 'speakerphone') {
+    return svg`
+      <path d="M18 8a3 3 0 0 1 0 6" />
+      <path d="M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5" />
+      <path d="M12 8h0l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8" />
+    `
+  }
+  if (name === 'user-cog') {
+    return svg`
+      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+      <path d="M6 21v-2a4 4 0 0 1 4 -4h2.5" />
+      <path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+      <path d="M19.001 15.5v1.5" />
+      <path d="M19.001 21v1.5" />
+      <path d="M22.032 17.25l-1.299 .75" />
+      <path d="M17.27 20l-1.3 .75" />
+      <path d="M15.97 17.25l1.3 .75" />
+      <path d="M20.733 20l1.3 .75" />
+    `
+  }
+  if (name === 'id-badge-2') {
+    return svg`
+      <path d="M7 12h3v4h-3z" />
+      <path d="M10 6h-6a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1h-6" />
+      <path d="M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" />
+      <path d="M14 16h2" />
+      <path d="M14 12h4" />
+    `
+  }
+  if (name === 'alert-circle') {
+    return svg`
+      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+      <path d="M12 8v4" />
+      <path d="M12 16h.01" />
+    `
+  }
+  if (name === 'clock-hour-4') {
+    return svg`
+      <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+      <path d="M12 12l3 2" />
+      <path d="M12 7v5" />
+    `
+  }
+  if (name === 'alert-triangle') {
+    return svg`
+      <path d="M12 9v4" />
+      <path
+        d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"
+      />
+      <path d="M12 16h.01" />
+    `
+  }
+  if (name === 'clock-exclamation') {
+    return svg`
+      <path d="M20.986 12.502a9 9 0 1 0 -5.973 7.98" />
+      <path d="M12 7v5l3 3" />
+      <path d="M19 16v3" />
+      <path d="M19 22v.01" />
+    `
+  }
+  if (name === 'circle-check-filled') {
+    return svg`<path
+      d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+      stroke-width="0"
+      fill="currentColor"
+    />`
+  }
+  return svg`<path
+    d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+    stroke-width="0"
+    fill="currentColor"
+  />`
+}

package/packages/web-components/src/safe-image-url.ts

@@ -0,0 +1,29 @@
+export function normalizeSafeImageUrl(value: unknown, label: string): string {
+  if (value === undefined || value === null) return ''
+  if (typeof value !== 'string') throw new TypeError(`${label} must be a string`)
+  const normalized = value.trim()
+  if (!normalized) return ''
+  if (normalized.length > 2_048) throw new TypeError(`${label} is too long`)
+
+  let url: URL
+  try {
+    const baseUrl = typeof document === 'undefined' ? 'https://localhost/' : document.baseURI
+    url = new URL(normalized, baseUrl)
+  } catch {
+    throw new TypeError(`${label} is invalid`)
+  }
+
+  if (!['http:', 'https:'].includes(url.protocol)) {
+    throw new TypeError(`${label} must use HTTP or HTTPS`)
+  }
+  if (url.username || url.password || url.hash) {
+    throw new TypeError(`${label} cannot contain credentials or a fragment`)
+  }
+  for (const key of url.searchParams.keys()) {
+    const normalizedKey = key.toLowerCase().replace(/[^a-z0-9]/g, '')
+    if (/(?:authorization|jwt|ticket|token)/.test(normalizedKey)) {
+      throw new TypeError(`${label} cannot contain authentication parameters`)
+    }
+  }
+  return url.href
+}

package/packages/web-components/src/safe-markdown.ts

@@ -0,0 +1,192 @@
+import { html, type TemplateResult } from 'lit'
+
+// Allow-listed Markdown renderer shared by server-authored component content.
+// Source text is always passed through Lit interpolation; only the fixed tags
+// below are produced. Raw HTML and unsafe link schemes therefore stay inert.
+
+type InlineNode = TemplateResult | string
+
+const INLINE_PATTERN =
+  /(`([^`]+)`)|(\*\*([^*]+)\*\*)|(__([^_]+)__)|(~~([^~]+)~~)|(\*([^*]+)\*)|(_([^_]+)_)|(\[([^\]]+)\]\(([^)\s]+)\))/
+
+export function renderSafeMarkdown(source: string): TemplateResult[] {
+  const lines = String(source ?? '')
+    .replace(/\r\n?/g, '\n')
+    .split('\n')
+  const blocks: TemplateResult[] = []
+  let index = 0
+
+  while (index < lines.length) {
+    const line = lines[index] ?? ''
+    if (line.trim() === '') {
+      index += 1
+      continue
+    }
+
+    if (/^```/.test(line.trim())) {
+      const code: string[] = []
+      index += 1
+      while (index < lines.length && !/^```/.test((lines[index] ?? '').trim())) {
+        code.push(lines[index] ?? '')
+        index += 1
+      }
+      if (index < lines.length) index += 1
+      blocks.push(html`<pre class="md-pre"><code>${code.join('\n')}</code></pre>`)
+      continue
+    }
+
+    const heading = /^(#{1,6})\s+(.+)$/.exec(line.trim())
+    if (heading) {
+      const content = renderInline(heading[2] ?? '')
+      switch (heading[1]?.length) {
+        case 1:
+          blocks.push(html`<h1 class="md-heading md-h1">${content}</h1>`)
+          break
+        case 2:
+          blocks.push(html`<h2 class="md-heading md-h2">${content}</h2>`)
+          break
+        case 3:
+          blocks.push(html`<h3 class="md-heading md-h3">${content}</h3>`)
+          break
+        default:
+          blocks.push(html`<h4 class="md-heading md-h4">${content}</h4>`)
+      }
+      index += 1
+      continue
+    }
+
+    if (/^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/.test(line)) {
+      blocks.push(html`<hr class="md-hr" />`)
+      index += 1
+      continue
+    }
+
+    if (/^\s*>\s?/.test(line)) {
+      const quoted: string[] = []
+      while (index < lines.length && /^\s*>\s?/.test(lines[index] ?? '')) {
+        quoted.push((lines[index] ?? '').replace(/^\s*>\s?/, ''))
+        index += 1
+      }
+      blocks.push(html`<blockquote class="md-quote">${renderLines(quoted)}</blockquote>`)
+      continue
+    }
+
+    if (isUnorderedItem(line)) {
+      const items: string[] = []
+      while (index < lines.length && isUnorderedItem(lines[index] ?? '')) {
+        items.push((lines[index] ?? '').replace(/^\s*[-*+]\s+/, ''))
+        index += 1
+      }
+      blocks.push(
+        html`<ul class="md-list md-ul">
+          ${items.map((item) => html`<li>${renderInline(item)}</li>`)}
+        </ul>`,
+      )
+      continue
+    }
+
+    if (isOrderedItem(line)) {
+      const items: string[] = []
+      while (index < lines.length && isOrderedItem(lines[index] ?? '')) {
+        items.push((lines[index] ?? '').replace(/^\s*\d+[.)]\s+/, ''))
+        index += 1
+      }
+      blocks.push(
+        html`<ol class="md-list md-ol">
+          ${items.map((item) => html`<li>${renderInline(item)}</li>`)}
+        </ol>`,
+      )
+      continue
+    }
+
+    const paragraph: string[] = []
+    while (index < lines.length) {
+      const current = lines[index] ?? ''
+      if (current.trim() === '' || isBlockStart(current)) break
+      paragraph.push(current)
+      index += 1
+    }
+    blocks.push(html`<p class="md-p">${renderLines(paragraph)}</p>`)
+  }
+
+  return blocks
+}
+
+function isBlockStart(line: string): boolean {
+  const trimmed = line.trim()
+  return (
+    /^```/.test(trimmed) ||
+    /^#{1,6}\s+/.test(trimmed) ||
+    /^\s{0,3}([-*_])(?:\s*\1){2,}\s*$/.test(line) ||
+    /^\s*>\s?/.test(line) ||
+    isUnorderedItem(line) ||
+    isOrderedItem(line)
+  )
+}
+
+function isUnorderedItem(line: string): boolean {
+  return /^\s*[-*+]\s+/.test(line)
+}
+
+function isOrderedItem(line: string): boolean {
+  return /^\s*\d+[.)]\s+/.test(line)
+}
+
+function renderLines(lines: readonly string[]): InlineNode[] {
+  const nodes: InlineNode[] = []
+  lines.forEach((line, index) => {
+    if (index > 0) nodes.push(html`<br />`)
+    nodes.push(...renderInline(line))
+  })
+  return nodes
+}
+
+function renderInline(text: string): InlineNode[] {
+  const nodes: InlineNode[] = []
+  let rest = text
+  while (rest) {
+    const match = INLINE_PATTERN.exec(rest)
+    if (!match || match.index === undefined) {
+      nodes.push(rest)
+      break
+    }
+    if (match.index > 0) nodes.push(rest.slice(0, match.index))
+    if (match[1]) {
+      nodes.push(html`<code class="md-code">${match[2] ?? ''}</code>`)
+    } else if (match[3]) {
+      nodes.push(html`<strong>${renderInline(match[4] ?? '')}</strong>`)
+    } else if (match[5]) {
+      nodes.push(html`<strong>${renderInline(match[6] ?? '')}</strong>`)
+    } else if (match[7]) {
+      nodes.push(html`<del>${renderInline(match[8] ?? '')}</del>`)
+    } else if (match[9]) {
+      nodes.push(html`<em>${renderInline(match[10] ?? '')}</em>`)
+    } else if (match[11]) {
+      nodes.push(html`<em>${renderInline(match[12] ?? '')}</em>`)
+    } else if (match[13]) {
+      const url = safeLinkUrl(match[15] ?? '')
+      const label = renderInline(match[14] ?? '')
+      nodes.push(
+        url
+          ? html`<a href=${url} target="_blank" rel="noopener noreferrer">${label}</a>`
+          : (match[13] ?? ''),
+      )
+    }
+    rest = rest.slice(match.index + match[0].length)
+  }
+  return nodes
+}
+
+function safeLinkUrl(raw: string): string {
+  const value = raw.trim()
+  if (!value) return ''
+  if (/^mailto:[^\s]+@[^\s]+$/i.test(value)) return value
+  try {
+    const base = typeof document === 'undefined' ? 'https://localhost/' : document.baseURI
+    const url = new URL(value, base)
+    if (['http:', 'https:'].includes(url.protocol)) return url.href
+  } catch {
+    // Unsafe or malformed links are rendered as their original Markdown text.
+  }
+  return ''
+}