@@ -0,0 +1,18 @@
+---
+'@object-ui/app-shell': patch
+---
+
+fix(app-shell): a marketplace package's README fits its detail page; badges render as images and pipe tables as tables
+
+Clause-②: no
+Metadata-protocol: none
+
+On a package's detail page below the `lg` breakpoint, one long line in a README code block widened the whole README past the page's right edge, where it was cut off with no way to scroll: the page's grid cells took their content's width as their minimum. Each cell now may shrink to the page, so long words wrap and only a code block or a table scrolls, inside itself.
+
+The README renderer also reads three things it printed as literal markup:
+
+- Images, `![alt](src)` and linked `[![alt](src)](href)` badges, render from an absolute `https:` URL, without sending the console's address as referrer. Any other source (a repository-relative path such as `LICENSE`, `http:`, `data:`, `javascript:`) is left out, alt text included. A linked image keeps its link only for an absolute `http:` or `https:` destination.
+- GFM pipe tables render as tables, with the delimiter row's alignment, each in its own horizontal scroller.
+- Thematic breaks (`---`, `***`, `___`) between blocks render as a rule.
+
+Everything else renders as before; release notes in the Versions panel go through the same renderer.
@@ -7,6 +7,14 @@
  *   • `- ` / `* ` bulleted lists (single level)
  *   • `1. ` numbered lists (single level)
  *   • `**bold**`, `*italic*`, `` `code` ``, `[text](url)` inline
+ *   • `![alt](src)` images, linked or not: drawn only from an absolute
+ *     `https:` URL, else left out (a repository-relative path such as
+ *     `LICENSE` names nothing the console can load). A linked image keeps
+ *     its anchor only for an absolute `http(s):` destination, for the same
+ *     reason. Image syntax inside a code span stays code.
+ *   • GFM pipe tables (header row, delimiter row, body rows), each in its
+ *     own horizontal scroller
+ *   • Thematic breaks (`---`, `***`, `___`) between blocks
  *   • Triple-backtick fenced code blocks
  *   • `>` blockquotes: consecutive `>` lines, their content parsed as blocks
  *     (so a quote nests lists, code and further quotes). A GitHub alert —
@@ -16,8 +24,11 @@
  *     quoted paragraph) is not read: an unprefixed line ends the quote.
  *
  * Deliberately NOT a full Markdown engine — we want zero new deps and
- * predictable output. If a README really needs tables or images, the
- * publisher can host their own docs and link via `homepage_url`.
+ * predictable output.
+ *
+ * Width: the README fits its column. Long words wrap; only a fenced block and
+ * a table scroll, each inside itself. The column itself must be allowed to
+ * shrink below its content (`min-w-0` on the grid cell that holds it).
  *
  * Raw HTML (objectui#12146) is recognised by CommonMark's own grammar — the
  * "HTML blocks" section's seven start conditions and the "Raw HTML" section's
@@ -32,15 +43,63 @@
  * prints as before.
  */
 
+import { Fragment, type ReactNode } from 'react';
 import { RAW_HTML_CLOSING_TAG, RAW_HTML_OPEN_TAG, renderInlineMarkdown } from '@object-ui/components';
 
 interface Block {
-  type: 'h1' | 'h2' | 'h3' | 'p' | 'ul' | 'ol' | 'code' | 'html' | 'quote';
+  type: 'h1' | 'h2' | 'h3' | 'p' | 'ul' | 'ol' | 'code' | 'html' | 'quote' | 'table' | 'hr';
   text?: string;
   items?: string[];
   lang?: string;
   /** A blockquote's content, parsed as blocks. */
   children?: Block[];
+  /** A table's header cells, its body rows (each padded to the header's count) and per-column alignment. */
+  table?: { head: string[]; rows: string[][]; align: TableAlign[] };
+}
+
+// ── Thematic breaks ─────────────────────────────────────────────────────────
+
+/** Three or more `-`, `*` or `_`, alone on the line, spaces allowed between them. */
+const THEMATIC_BREAK = /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/;
+/** CommonMark's setext underline: under a paragraph line it is not a rule. */
+const SETEXT_UNDERLINE = /^ {0,3}-+[ \t]*$/;
+
+// ── GFM pipe tables ─────────────────────────────────────────────────────────
+
+type TableAlign = 'left' | 'center' | 'right' | null;
+
+/** A delimiter row: `---`, `:--`, `--:` or `:-:` cells between pipes. */
+const TABLE_DELIMITER_ROW = /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/;
+
+/** A row's cells: the outer pipes dropped, split on every pipe not escaped as `\|`. */
+function tableCells(line: string): string[] {
+  let row = line.trim();
+  if (row.startsWith('|')) row = row.slice(1);
+  if (row.endsWith('|') && !row.endsWith('\\|')) row = row.slice(0, -1);
+  return row.split(/(?<!\\)\|/).map((cell) => cell.trim().replace(/\\\|/g, '|'));
+}
+
+/** A table starts where a line holding a pipe sits above a delimiter row with the same cell count. */
+function isTableStart(lines: string[], i: number): boolean {
+  const head = lines[i];
+  const delimiter = lines[i + 1];
+  if (!head?.includes('|') || delimiter === undefined || !TABLE_DELIMITER_ROW.test(delimiter)) return false;
+  if (!delimiter.includes('|') && !head.trim().startsWith('|')) return false;
+  return tableCells(head).length === tableCells(delimiter).length;
+}
+
+/** A line that opens a heading, a fence, a quote or a rule, which ends a table. */
+function startsOtherBlock(line: string): boolean {
+  return /^#{1,3}\s+/.test(line) || line.startsWith('```') || QUOTE_LINE.test(line) || THEMATIC_BREAK.test(line);
+}
+
+function tableAlign(cell: string): TableAlign {
+  const left = cell.startsWith(':');
+  const right = cell.endsWith(':');
+  if (left && right) return 'center';
+  if (right) return 'right';
+  if (left) return 'left';
+  return null;
 }
 
 // ── Blockquotes ─────────────────────────────────────────────────────────────
@@ -148,6 +207,29 @@ function parseBlocks(src: string): Block[] {
       continue;
     }
 
+    // Thematic break, before the bullet list: `* * *` is a rule, not an item.
+    if (THEMATIC_BREAK.test(line)) {
+      blocks.push({ type: 'hr' });
+      i++;
+      continue;
+    }
+
+    // GFM pipe table: the header, the delimiter row, then every following line
+    // that holds a pipe, up to a blank line.
+    if (isTableStart(lines, i)) {
+      const head = tableCells(line);
+      const align = tableCells(lines[i + 1]).map(tableAlign);
+      i += 2;
+      const rows: string[][] = [];
+      while (i < lines.length && lines[i].trim() && lines[i].includes('|') && !startsOtherBlock(lines[i])) {
+        const cells = tableCells(lines[i]);
+        rows.push(head.map((_, c) => cells[c] ?? ''));
+        i++;
+      }
+      blocks.push({ type: 'table', table: { head, rows, align } });
+      continue;
+    }
+
     // Headings
     const h = /^(#{1,3})\s+(.*)$/.exec(line);
     if (h) {
@@ -195,7 +277,10 @@ function parseBlocks(src: string): Block[] {
       !/^\d+\.\s+/.test(lines[i]) &&
       !lines[i].startsWith('```') &&
       !QUOTE_LINE.test(lines[i]) &&
-      !htmlBlockRule(lines[i])?.interruptsParagraph
+      !htmlBlockRule(lines[i])?.interruptsParagraph &&
+      !isTableStart(lines, i) &&
+      // `***` and `___` end a paragraph; a `---` line under one stays its text, as before.
+      !(THEMATIC_BREAK.test(lines[i]) && !SETEXT_UNDERLINE.test(lines[i]))
     ) {
       buf.push(lines[i]);
       i++;
@@ -218,8 +303,71 @@ const README_INLINE = {
   newTab: 'all',
 } as const;
 
-function renderInline(input: string): React.ReactNode {
-  return renderInlineMarkdown(input, README_INLINE);
+// ── Images ──────────────────────────────────────────────────────────────────
+// Matched here, before the shared inline pass, which has no image rule: an
+// image is a request the viewer's browser makes to a third party, so the rule
+// stays this renderer's. A destination may hold one level of balanced parentheses.
+
+const DESTINATION = '((?:[^()\\s]|\\([^()\\s]*\\))+)';
+const IMAGE = `!\\[([^\\]]*)\\]\\(${DESTINATION}(?:\\s+"[^"]*")?\\)`;
+/** A linked image, `[![alt](src)](href)`, or a bare image, `![alt](src)`; a code span is matched so it is skipped. */
+const IMAGE_OR_CODE = new RegExp(`(?<!\`)\`[^\`]+\`(?!\`)|\\[${IMAGE}\\]\\(${DESTINATION}\\)|${IMAGE}`);
+
+/** An absolute URL with the given schemes, or `null`: a relative path resolves against the console, not the repository. */
+function absoluteUrl(raw: string, schemes: readonly string[]): string | null {
+  // Browsers strip whitespace and control characters before reading a scheme, so either refuses the URL.
+  if (/\s/.test(raw) || [...raw].some((ch) => ch.charCodeAt(0) <= 0x1f || ch.charCodeAt(0) === 0x7f)) return null;
+  try {
+    return schemes.includes(new URL(raw).protocol) ? raw : null;
+  } catch {
+    return null;
+  }
+}
+
+function readmeImage(alt: string, rawSrc: string): ReactNode {
+  const src = absoluteUrl(rawSrc, ['https:']);
+  if (src === null) return null;
+  return (
+    <img
+      src={src}
+      alt={alt}
+      loading="lazy"
+      decoding="async"
+      referrerPolicy="no-referrer"
+      className="inline-block h-auto max-w-full align-middle"
+    />
+  );
+}
+
+function renderInline(input: string): ReactNode {
+  const out: ReactNode[] = [];
+  let text = '';
+  let remaining = input;
+  for (let m = IMAGE_OR_CODE.exec(remaining); m; m = IMAGE_OR_CODE.exec(remaining)) {
+    const [whole, linkedAlt, linkedSrc, href, alt, src] = m;
+    text += remaining.slice(0, m.index);
+    remaining = remaining.slice(m.index + whole.length);
+    if (whole.startsWith('`')) {
+      text += whole;
+      continue;
+    }
+    if (text) out.push(renderInlineMarkdown(text, README_INLINE));
+    text = '';
+    if (linkedSrc === undefined) {
+      out.push(readmeImage(alt, src));
+      continue;
+    }
+    const image = readmeImage(linkedAlt, linkedSrc);
+    const target = image === null ? null : absoluteUrl(href, ['https:', 'http:']);
+    out.push(
+      target === null ? image : (
+        <a href={target} target="_blank" rel="noopener noreferrer" className={README_INLINE.classNames.link}>{image}</a>
+      ),
+    );
+  }
+  text += remaining;
+  if (text) out.push(renderInlineMarkdown(text, README_INLINE));
+  return <>{out.map((n, i) => <Fragment key={i}>{n}</Fragment>)}</>;
 }
 
 /**
@@ -247,7 +395,13 @@ const SIZE_CLASSES: Record<MarkdownSize, { root: string; stack: string; h1: stri
   },
 };
 
-function renderBlocks(blocks: Block[], size: MarkdownSize): React.ReactNode[] {
+const ALIGN_CLASSES: Record<NonNullable<TableAlign>, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+function renderBlocks(blocks: Block[], size: MarkdownSize): ReactNode[] {
   const cls = SIZE_CLASSES[size];
   return blocks.map((b, i) => {
     switch (b.type) {
@@ -265,7 +419,7 @@ function renderBlocks(blocks: Block[], size: MarkdownSize): React.ReactNode[] {
             {(b.items ?? []).map((it, j) => (
               <li key={j} className="flex gap-2">
                 <span aria-hidden="true" className="mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-violet-500/70" />
-                <span>{renderInline(it)}</span>
+                <span className="min-w-0">{renderInline(it)}</span>
               </li>
             ))}
           </ul>
@@ -284,6 +438,34 @@ function renderBlocks(blocks: Block[], size: MarkdownSize): React.ReactNode[] {
             <code className="font-mono">{b.text}</code>
           </pre>
         );
+      case 'table': {
+        const { head, rows, align } = b.table!;
+        const alignClass = (c: number) => ALIGN_CLASSES[align[c] ?? 'left'];
+        return (
+          <div key={i} className="overflow-x-auto rounded-lg border">
+            <table className="w-full border-collapse">
+              <thead className="bg-muted/40">
+                <tr>
+                  {head.map((cell, c) => (
+                    <th key={c} className={`border-b px-3 py-2 font-semibold text-foreground ${alignClass(c)}`}>{renderInline(cell)}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row, r) => (
+                  <tr key={r} className="border-b last:border-b-0">
+                    {row.map((cell, c) => (
+                      <td key={c} className={`px-3 py-2 align-top ${alignClass(c)}`}>{renderInline(cell)}</td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+      }
+      case 'hr':
+        return <hr key={i} className="border-border" />;
       case 'quote':
         return (
           <blockquote key={i} className={`flex flex-col ${cls.stack} border-l-2 border-violet-500/40 pl-4 text-muted-foreground`}>
@@ -301,7 +483,7 @@ function renderBlocks(blocks: Block[], size: MarkdownSize): React.ReactNode[] {
 export function MarkdownText({ source, className, size = 'base' }: { source: string; className?: string; size?: MarkdownSize }) {
   const cls = SIZE_CLASSES[size];
   return (
-    <div className={`flex flex-col ${cls.stack} ${cls.root} ${className ?? ''}`}>
+    <div className={`flex min-w-0 flex-col break-words ${cls.stack} ${cls.root} ${className ?? ''}`}>
       {renderBlocks(parseBlocks(source), size)}
     </div>
   );
 
@@ -1402,8 +1402,11 @@ export function MarketplacePackagePage() {
 
       {localResultNote(pkg.manifest_id)}
 
+      {/* `min-w-0` on each cell: a grid item's automatic minimum is its content's
+          width, so a long line in the README would widen the page past its edge
+          instead of scrolling inside its own block. */}
       <div className="grid gap-4 lg:grid-cols-3">
-        <div className="lg:col-span-2 space-y-4">
+        <div className="min-w-0 lg:col-span-2 space-y-4">
           <Card>
             <CardHeader>
               <CardTitle className="text-base">{t('marketplace.detail.about')}</CardTitle>
@@ -1417,7 +1420,7 @@ export function MarketplacePackagePage() {
             </CardContent>
           </Card>
         </div>
-        <div className="space-y-4">
+        <div className="min-w-0 space-y-4">
           <Card>
             <CardHeader>
               <CardTitle className="text-base">{t('marketplace.detail.versions')}</CardTitle>