@riebeckite/plugin-qr-code 0.0.19 → 0.0.21

package/README.md

@@ -46,20 +46,23 @@ code block untouched and reports a `@riebeckite/plugin-qr-code` diagnostic.
 Each block becomes:
 
 ```html
-<figure class="rb-qr" data-qr="rendered" data-qr-level="M" data-qr-margin="1">
-  <figcaption class="rb-qr__caption">…</figcaption>
-  <div class="rb-qr__canvas" role="img"><svg>…</svg></div>
-  <details class="rb-qr__fallback">
-    <summary>QR source</summary>
-    <pre><code>…</code></pre>
-  </details>
+<figure class="rb-qr" data-qr="rendered" data-qr-level="M" data-qr-margin="1" style="--rb-qr-size:160px">
+  <div class="rb-qr__canvas" role="img" aria-label="QR code"><svg>…</svg></div>
+  <figcaption class="rb-qr__caption">
+    <span class="rb-qr__caption-text">…</span>
+    <a class="rb-qr__source" href="…">…</a>
+  </figcaption>
 </figure>
 ```
 
 - `data-qr` is `"rendered"` on success and `"error"` when the encoder is
   unavailable or the block cannot be encoded.
-- The raw text stays available in `details.rb-qr__fallback` (unless `fallback`
-  is `false`), so an error never loses content.
+- The encoded payload is always rendered as plain text in
+  `figcaption.rb-qr__caption`, so the value stays readable and copyable even
+  without scanning the code. An `http:`, `https:`, `mailto:`, or `tel:` payload
+  becomes an `<a class="rb-qr__source">`; anything else stays a `<span>`.
+- The card width follows the `width` option instead of the payload, so a long
+  URL wraps rather than stretching the figure.
 - Errors and empty blocks report a snippet diagnostic with
   `source: "@riebeckite/plugin-qr-code"`.
 
@@ -78,13 +81,11 @@ virtual store.
 | `level` | `"L" \| "M" \| "Q" \| "H"` | `"M"` | Error-correction level |
 | `margin` | `number` | `1` | Quiet-zone size in modules |
 | `width` | `number` | `160` | Rendered size in pixels |
-| `size` | `number` | — | Alias of `width` |
 | `dark` | `string` | `"#000000"` | Dark-module colour |
 | `light` | `string` | `"#ffffff"` | Light-module colour |
 | `caption` | `boolean` | `true` | Show a caption from the title / `# caption:` line |
 | `className` | `string` | `"rb-qr"` | Figure CSS class |
 | `language` | `string` | `"qr"` | Fence language to intercept |
-| `fallback` | `boolean` | `true` | Keep the raw text in `<details>` |
 
 The caption comes from the code-block `title` (code meta) or a leading
 `# caption: …` line. A leading caption line is removed from the encoded body.
@@ -100,5 +101,4 @@ The caption comes from the code-block `title` (code meta) or a leading
 
 ## See also
 
-- [Plugin guide](../../../docs/docs/reference/plugin-api.en.md)
-
+- [Plugin guide](../../../docs/docs/reference/plugin-api.md)

package/README_ja.md

@@ -42,18 +42,18 @@ https://example.com/
 各ブロックは次の形になります。
 
 ```html
-<figure class="rb-qr" data-qr="rendered" data-qr-level="M" data-qr-margin="1">
-  <figcaption class="rb-qr__caption">…</figcaption>
-  <div class="rb-qr__canvas" role="img"><svg>…</svg></div>
-  <details class="rb-qr__fallback">
-    <summary>QR source</summary>
-    <pre><code>…</code></pre>
-  </details>
+<figure class="rb-qr" data-qr="rendered" data-qr-level="M" data-qr-margin="1" style="--rb-qr-size:160px">
+  <div class="rb-qr__canvas" role="img" aria-label="QR code"><svg>…</svg></div>
+  <figcaption class="rb-qr__caption">
+    <span class="rb-qr__caption-text">…</span>
+    <a class="rb-qr__source" href="…">…</a>
+  </figcaption>
 </figure>
 ```
 
 - `data-qr` は成功時に `"rendered"`、エンコーダを読み込めない場合やエンコードに失敗した場合に `"error"` になります。
-- 元のテキストは `details.rb-qr__fallback` に残ります（`fallback: false` の場合は除く）。エラー時も内容が失われることはありません。
+- エンコード対象の値は `figcaption.rb-qr__caption` に常にテキストとして表示されるため、コードを読み取らなくても内容を確認・コピーできます。`http:`・`https:`・`mailto:`・`tel:` の値は `<a class="rb-qr__source">` になり、それ以外は `<span>` のままです。
+- カードの幅はペイロードではなく `width` オプションに従うため、長い URL はカードを押し広げず折り返します。
 - エラーと空ブロックは `source: "@riebeckite/plugin-qr-code"` の診断として報告されます。
 
 ### エンコーダの読み込み
@@ -67,13 +67,11 @@ QR エンコーダ（`qrcode`）はビルド時に動的インポートするた
 | `level` | `"L" \| "M" \| "Q" \| "H"` | `"M"` | 誤り訂正レベル |
 | `margin` | `number` | `1` | 余白（モジュール数） |
 | `width` | `number` | `160` | 表示サイズ（px） |
-| `size` | `number` | — | `width` の別名 |
 | `dark` | `string` | `"#000000"` | 暗モジュールの色 |
 | `light` | `string` | `"#ffffff"` | 明モジュールの色 |
 | `caption` | `boolean` | `true` | タイトルまたは `# caption:` 行をキャプションとして表示する |
 | `className` | `string` | `"rb-qr"` | figure の CSS クラス |
 | `language` | `string` | `"qr"` | 対象とするフェンス言語 |
-| `fallback` | `boolean` | `true` | 元のテキストを `<details>` に残す |
 
 キャプションはコードブロックの `title`（コードメタ）または先頭の `# caption: …` 行から取得します。先頭のキャプション行はエンコード対象から取り除きます。
 
@@ -87,5 +85,4 @@ QR エンコーダ（`qrcode`）はビルド時に動的インポートするた
 
 ## 関連資料
 
-- [プラグインシステム](../../../docs/docs/reference/plugin-api.md)
-
+- [プラグインシステム](../../../docs/docs/reference/plugin-api.ja.md)

package/dist/index.js

@@ -16,7 +16,7 @@ var __export = (target, all) => {
 // src/options.ts
 function resolveQrCodeOptions(options = {}) {
   const width = normalizePositiveInteger(
-    options.width ?? options.size,
+    options.width,
     DEFAULT_QR_CODE_OPTIONS.width
   );
   const margin = normalizeNonNegativeInteger(
@@ -35,8 +35,7 @@ function resolveQrCodeOptions(options = {}) {
     light,
     caption: options.caption ?? DEFAULT_QR_CODE_OPTIONS.caption,
     className,
-    language,
-    fallback: options.fallback ?? DEFAULT_QR_CODE_OPTIONS.fallback
+    language
   };
 }
 function normalizeLevel(value) {
@@ -74,8 +73,7 @@ var init_options = __esm({
       light: "#ffffff",
       caption: true,
       className: "rb-qr",
-      language: "qr",
-      fallback: true
+      language: "qr"
     };
   }
 });
@@ -330,17 +328,24 @@ async function replaceQrBlock(parent, index, pre, file, options) {
   }
 }
 function buildRenderedFigure(source, svg, caption, options) {
+  return buildFigure(source, caption, options, "rendered", [raw(svg)]);
+}
+function buildErrorFigure(source, caption, options, message, file) {
+  reportDiagnostic(file, `QR code could not be rendered: ${message}`, "render");
+  return buildFigure(source, caption, options, "error", []);
+}
+function buildFigure(source, caption, options, state, canvasChildren) {
   const labelId = `${figureId(source, options)}-caption`;
   return element(
     "figure",
     {
       className: options.className,
-      dataQr: "rendered",
+      dataQr: state,
       dataQrLevel: options.level,
-      dataQrMargin: String(options.margin)
+      dataQrMargin: String(options.margin),
+      style: `--rb-qr-size:${options.width}px`
     },
     [
-      ...renderCaption(caption, options, labelId),
       element(
         "div",
         {
@@ -349,64 +354,46 @@ function buildRenderedFigure(source, svg, caption, options) {
           ariaLabelledby: caption ? labelId : void 0,
           ariaLabel: caption ? void 0 : "QR code"
         },
-        [raw(svg)]
+        canvasChildren
       ),
-      ...renderFallback(source, options)
+      renderCaption(source, caption, options, labelId)
     ]
   );
 }
-function buildErrorFigure(source, caption, options, message, file) {
-  reportDiagnostic(file, `QR code could not be rendered: ${message}`, "render");
-  const labelId = `${figureId(source, options)}-caption`;
-  return element(
-    "figure",
-    {
-      className: options.className,
-      dataQr: "error",
-      dataQrLevel: options.level,
-      dataQrMargin: String(options.margin)
-    },
-    [
-      ...renderCaption(caption, options, labelId),
+function renderCaption(source, caption, options, labelId) {
+  const children = [];
+  if (caption) {
+    children.push(
       element(
-        "div",
+        "span",
         {
-          className: qrElementClassName(options.className, "canvas"),
-          role: "img",
-          ariaLabelledby: caption ? labelId : void 0,
-          ariaLabel: caption ? void 0 : "QR code"
+          id: labelId,
+          className: qrElementClassName(options.className, "caption-text")
         },
-        []
-      ),
-      ...renderFallback(source, options)
-    ]
+        [text(caption)]
+      )
+    );
+  }
+  children.push(renderSource(source, options));
+  return element(
+    "figcaption",
+    { className: qrElementClassName(options.className, "caption") },
+    children
   );
 }
-function renderCaption(caption, options, labelId) {
-  if (!caption) return [];
-  return [
-    element(
-      "figcaption",
-      {
-        id: labelId,
-        className: qrElementClassName(options.className, "caption")
-      },
-      [text(caption)]
-    )
-  ];
-}
-function renderFallback(source, options) {
-  if (!options.fallback) return [];
-  return [
-    element(
-      "details",
-      { className: qrElementClassName(options.className, "fallback") },
-      [
-        element("summary", {}, [text("QR source")]),
-        element("pre", {}, [element("code", {}, [text(source)])])
-      ]
-    )
-  ];
+function renderSource(source, options) {
+  const className = qrElementClassName(options.className, "source");
+  const href = navigableHref(source);
+  if (href) return element("a", { className, href }, [text(source)]);
+  return element("span", { className }, [text(source)]);
+}
+function navigableHref(source) {
+  try {
+    const { protocol } = new URL(source);
+    return NAVIGABLE_PROTOCOLS.has(protocol) ? source : null;
+  } catch {
+    return null;
+  }
 }
 function extractCaption(source, pre, code) {
   const title = getStringProperty(pre, "title") ?? getStringProperty(code ?? pre, "title") ?? metaTitle(getStringProperty(code ?? pre, "data-meta")) ?? metaTitle(getStringProperty(code ?? pre, "dataMeta")) ?? metaTitle(getCodeDataMeta(code));
@@ -494,13 +481,14 @@ function reportDiagnostic(file, message, ruleId) {
     Object.assign(diagnostic, { source: PLUGIN_SOURCE, ruleId });
   }
 }
-var CAPTION_PATTERN, META_TITLE_PATTERN, PLUGIN_SOURCE;
+var CAPTION_PATTERN, META_TITLE_PATTERN, PLUGIN_SOURCE, NAVIGABLE_PROTOCOLS;
 var init_rehype = __esm({
   "src/rehype.ts"() {
     init_options();
     CAPTION_PATTERN = /^[ \t]*#[ \t]*caption[ \t]*:[ \t]*(.+?)[ \t]*(?:\r?\n|$)/i;
     META_TITLE_PATTERN = /title=(?:"([^"]*)"|'([^']*)'|(\S+))/;
     PLUGIN_SOURCE = "@riebeckite/plugin-qr-code";
+    NAVIGABLE_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
   }
 });
 
@@ -518,7 +506,7 @@ function qrCode(options = {}) {
     name: PLUGIN_NAME,
     order: -10,
     processedContentCache: {
-      version: "qr-code-v1",
+      version: "qr-code-v2",
       dependencyMode: "none"
     },
     options,
@@ -533,13 +521,16 @@ var qrCodePlugin = qrCode;
 function validateQrCodeOptions(options) {
   if (!options) return [];
   const issues = [];
+  if (Object.hasOwn(options, "size")) {
+    issues.push({ path: "size", message: 'Unknown option. Use "width".' });
+  }
   if (options.level !== void 0 && !QR_CODE_LEVELS.includes(options.level)) {
     issues.push({
       path: "level",
       message: `Expected one of: ${QR_CODE_LEVELS.join(", ")}.`
     });
   }
-  for (const key of ["margin", "width", "size"]) {
+  for (const key of ["margin", "width"]) {
     const value = options[key];
     if (value === void 0) continue;
     if (!Number.isInteger(value) || value < 0 || key !== "margin" && value === 0) {
@@ -555,7 +546,7 @@ function validateQrCodeOptions(options) {
       issues.push({ path: key, message: "Expected a non-empty string." });
     }
   }
-  for (const key of ["caption", "fallback"]) {
+  for (const key of ["caption"]) {
     if (options[key] !== void 0 && typeof options[key] !== "boolean") {
       issues.push({ path: key, message: "Expected a boolean." });
     }

package/dist/src/types.d.ts

@@ -7,8 +7,6 @@ export type QrCodeOptions = {
     margin?: number;
     /** Rendered width/height in pixels. Defaults to `160`. */
     width?: number;
-    /** Alias of `width`; `width` wins when both are present. */
-    size?: number;
     /** Dark-module colour. Defaults to `"#000000"`. */
     dark?: string;
     /** Light-module colour. Defaults to `"#ffffff"`. */
@@ -19,8 +17,6 @@ export type QrCodeOptions = {
     className?: string;
     /** Fence language that selects the block. Defaults to `"qr"`. */
     language?: string;
-    /** Keep the raw source in a collapsible `<details>`. Defaults to `true`. */
-    fallback?: boolean;
 };
 /** `QrCodeOptions` with every field resolved to a concrete value. */
 export type ResolvedQrCodeOptions = {
@@ -32,7 +28,6 @@ export type ResolvedQrCodeOptions = {
     caption: boolean;
     className: string;
     language: string;
-    fallback: boolean;
 };
 /**
  * Build-time result of encoding a fence body. A failure carries a human

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-qr-code",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "qrcode": "^1.5.4",
-    "@riebeckite/core": "0.0.19"
+    "@riebeckite/core": "0.0.21"
   },
   "publishConfig": {
     "access": "public"
@@ -51,6 +51,7 @@
     "./style.css"
   ],
   "scripts": {
-    "build": "node ../../../scripts/build_package.mjs"
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
   }
 }

package/style.css

@@ -6,67 +6,76 @@
     --rb-color-border,
     color-mix(in srgb, var(--rb-qr-ink) 18%, transparent)
   );
+  --rb-qr-gutter: 1rem;
   box-sizing: border-box;
-  width: fit-content;
-  max-width: 100%;
+  inline-size: calc(var(--rb-qr-size, 160px) + 2 * var(--rb-qr-gutter));
+  max-inline-size: 100%;
   margin: 2rem auto;
   border: 1px solid var(--rb-qr-rule);
   background: var(--rb-qr-paper);
   color: var(--rb-qr-ink);
 }
 
-.rb-qr__caption {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--rb-qr-rule);
-  color: var(--rb-qr-muted);
-  font-size: 0.8125rem;
-  text-align: center;
-}
-
 .rb-qr__canvas {
   display: grid;
   place-items: center;
-  padding: 1rem;
+  padding: var(--rb-qr-gutter);
 }
 
 .rb-qr__canvas > svg {
   display: block;
-  max-width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
+  max-inline-size: var(--rb-qr-size, 160px);
 }
 
-.rb-qr__fallback {
+.rb-qr__caption {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0.5rem 0.75rem;
   border-top: 1px solid var(--rb-qr-rule);
   color: var(--rb-qr-muted);
   font-size: 0.8125rem;
+  text-align: center;
 }
 
-.rb-qr__fallback summary {
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-}
-
-.rb-qr__fallback pre {
-  overflow: auto;
-  margin: 0 1rem 0.75rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--rb-qr-rule);
+.rb-qr__caption-text {
   color: var(--rb-qr-ink);
-  background: color-mix(in srgb, var(--rb-qr-ink) 6%, transparent);
+  overflow-wrap: anywhere;
 }
 
-.rb-qr[data-qr="error"] .rb-qr__canvas:empty::before {
-  content: "QR code could not be rendered.";
+.rb-qr__source {
+  min-inline-size: 0;
   color: var(--rb-qr-muted);
+  font-family: var(--rb-font-mono, monospace);
+  font-size: 0.75rem;
+  text-align: start;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
-.rb-qr[data-qr="pending"] .rb-qr__canvas:empty::before {
-  content: "Rendering QR code…";
+a.rb-qr__source {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.rb-qr[data-qr="error"] .rb-qr__canvas:empty::before {
+  content: "QR code could not be rendered.";
   color: var(--rb-qr-muted);
 }
 
-html[data-theme="dark"] .rb-qr,
-html.dark .rb-qr {
+:is(:root, .rb-theme-root)[data-theme="dark"] .rb-qr {
   --rb-qr-paper: var(--rb-color-ink, #000000);
   --rb-qr-ink: var(--rb-color-paper, #ffffff);
 }
+
+@media (prefers-color-scheme: dark) {
+  :is(:root, .rb-theme-root):not([data-theme]) .rb-qr {
+    --rb-qr-paper: var(--rb-color-ink, #000000);
+    --rb-qr-ink: var(--rb-color-paper, #ffffff);
+  }
+}