@riebeckite/plugin-code-tabs 0.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright Rerurate_514
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,97 @@
+# @riebeckite/plugin-code-tabs
+
+Groups adjacent code blocks with `tab="..."` metadata into an accessible tab UI.
+
+[日本語](./README_ja.md)
+
+## Installation
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { codeTabs } from "@riebeckite/plugin-code-tabs";
+
+export default defineConfig({
+  // ...
+  plugins: [codeTabs()],
+});
+```
+
+The plugin registers its own `style.css` and client entry (`initCodeTabs`).
+
+## Config
+
+```ts
+codeTabs({
+  syncTabs: false,
+});
+```
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `syncTabs` | `boolean` | `false` | When enabled, selecting a label such as `TypeScript` also selects the same label in other code-tab groups on the page. |
+
+## Syntax
+
+````md
+```dart tab="Flutter"
+void main() {}
+```
+
+```ts tab="React"
+console.log("Hello");
+```
+````
+
+Regular code blocks without `tab="..."` are not changed.
+
+## Grouping rules
+
+Adjacent `tab="..."` code blocks become one group. Any other content ends the
+current group.
+
+````md
+```dart tab="Dart"
+```
+```ts tab="TypeScript"
+```
+````
+
+The two blocks above are one group.
+
+````md
+```dart tab="Dart"
+```
+
+Text between blocks.
+
+```ts tab="TypeScript"
+```
+````
+
+The paragraph separates them into different groups.
+
+## Using with code-enhance
+
+`@riebeckite/plugin-code-tabs` does not import or depend on
+`@riebeckite/plugin-code-enhance`. It detects both normal `<pre><code>` blocks
+and enhanced `rehype-pretty-code` figures, then wraps the whole rendered code
+block as a panel. Syntax highlighting, filename headers, copy buttons, wrap,
+collapse, line numbers, and diff/highlight markup are preserved as much as
+possible.
+
+Place `codeTabs()` after `codeEnhance()` if both plugins are enabled so tabs wrap
+the enhanced code block output.
+
+## Accessibility
+
+The generated HTML uses `role="tablist"`, `role="tab"`, and `role="tabpanel"`.
+The client supports click, `ArrowLeft`, `ArrowRight`, `Home`, `End`, `Enter`, and
+`Space`, and keeps `aria-selected` and `tabindex` in sync. Without JavaScript,
+all panels remain visible so every code block can still be read.
+
+## Exports
+
+- `codeTabs(options?)` — plugin factory
+- `rehypeCodeTabs(options?)` — rehype transform
+- `initCodeTabs(options?)` — client initializer
+- Types: `CodeTabsOptions`, `CodeTabsClientOptions`

package/README_ja.md

@@ -0,0 +1,55 @@
+# @riebeckite/plugin-code-tabs
+
+連続するコードブロックを、`tab="..."` の名前ごとにタブへまとめるプラグインです。
+
+[English](./README.md)
+
+## 設定
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { codeTabs } from "@riebeckite/plugin-code-tabs";
+
+export default defineConfig({
+  // ...
+  plugins: [codeTabs()],
+});
+```
+
+スタイルと `initCodeTabs` はプラグイン自身が登録します。
+
+## コードブロックにタブ名を付ける
+
+````md
+```dart tab="Flutter"
+void main() {}
+```
+
+```ts tab="React"
+console.log("Hello");
+```
+````
+
+`tab` を持つコードブロックが連続している間だけ、一つのタブグループになります。段落、見出し、画像などが間に入ると別のグループです。`tab` のないコードブロックは変更しません。
+
+## オプションとアクセシビリティ
+
+| オプション | 既定値 | 内容 |
+| --- | --- | --- |
+| `syncTabs` | `false` | あるタブを選ぶと、同じページの同名タブも切り替えるか |
+
+生成する要素には `tablist`、`tab`、`tabpanel` のロールを設定します。矢印キー、`Home`、`End`、`Enter`、`Space` で操作でき、JavaScript が動かない場合は全パネルをそのまま読めます。
+
+`@riebeckite/plugin-code-enhance` と併用する場合は、強調表示後の出力をまとめられるよう `codeEnhance()` の後に `codeTabs()` を置いてください。
+
+## 公開 API
+
+- `codeTabs(options?)` — プラグインファクトリ
+- `rehypeCodeTabs(options?)` — Rehype 変換
+- `initCodeTabs(options?)` — ブラウザ初期化関数
+- `CodeTabsOptions`、`CodeTabsClientOptions` — 型
+
+## 関連資料
+
+- [プラグインシステム](../../../docs/ja/plugin-system.md)
+- [`@riebeckite/plugin-code-enhance`](../code-enhance/README_ja.md)

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { initCodeTabs } from "./src/init.js";
+export type { CodeTabsClientOptions } from "./src/types.js";

package/dist/client.js

@@ -0,0 +1,84 @@
+// src/init.ts
+var SELECTOR = "[data-code-tabs='true']";
+var TAB_SELECTOR = "[data-code-tabs-tab='true']";
+var PANEL_SELECTOR = "[data-code-tabs-panel='true']";
+function initCodeTabs(options = {}) {
+  const groups = getGroups();
+  for (const group of groups) initializeGroup(group, options);
+}
+function initializeGroup(group, options) {
+  const tabs = getTabs(group);
+  const panels = getPanels(group);
+  if (tabs.length === 0 || panels.length === 0) return;
+  const initialIndex = tabs.findIndex(
+    (tab) => tab.getAttribute("aria-selected") === "true"
+  );
+  activateTab(group, Math.max(initialIndex, 0), { focus: false, sync: false });
+  for (const [index, tab] of tabs.entries()) {
+    tab.addEventListener("click", () => {
+      activateTab(group, index, {
+        focus: true,
+        sync: options.syncTabs === true
+      });
+    });
+    tab.addEventListener("keydown", (event) => {
+      const nextIndex = getKeyboardTargetIndex(event, index, tabs.length);
+      if (nextIndex === null) return;
+      event.preventDefault();
+      activateTab(group, nextIndex, {
+        focus: true,
+        sync: options.syncTabs === true
+      });
+    });
+  }
+}
+function activateTab(group, index, behavior) {
+  const tabs = getTabs(group);
+  const panels = getPanels(group);
+  const selectedTab = tabs[index];
+  if (!selectedTab) return;
+  for (const [tabIndex, tab] of tabs.entries()) {
+    const selected = tabIndex === index;
+    tab.setAttribute("aria-selected", selected ? "true" : "false");
+    tab.tabIndex = selected ? 0 : -1;
+  }
+  for (const [panelIndex, panel] of panels.entries()) {
+    const selected = panelIndex === index;
+    panel.dataset.active = selected ? "true" : "false";
+    panel.hidden = !selected;
+  }
+  if (behavior.focus) selectedTab.focus();
+  if (!behavior.sync || group.dataset.codeTabsSync !== "true") return;
+  const label = selectedTab.dataset.codeTabsLabel;
+  if (!label) return;
+  for (const otherGroup of getGroups()) {
+    if (otherGroup === group || otherGroup.dataset.codeTabsSync !== "true")
+      continue;
+    const otherIndex = getTabs(otherGroup).findIndex(
+      (tab) => tab.dataset.codeTabsLabel === label
+    );
+    if (otherIndex >= 0) {
+      activateTab(otherGroup, otherIndex, { focus: false, sync: false });
+    }
+  }
+}
+function getKeyboardTargetIndex(event, currentIndex, total) {
+  if (event.key === "ArrowLeft") return (currentIndex + total - 1) % total;
+  if (event.key === "ArrowRight") return (currentIndex + 1) % total;
+  if (event.key === "Home") return 0;
+  if (event.key === "End") return total - 1;
+  if (event.key === "Enter" || event.key === " ") return currentIndex;
+  return null;
+}
+function getGroups() {
+  return Array.from(document.querySelectorAll(SELECTOR));
+}
+function getTabs(group) {
+  return Array.from(group.querySelectorAll(TAB_SELECTOR));
+}
+function getPanels(group) {
+  return Array.from(group.querySelectorAll(PANEL_SELECTOR));
+}
+export {
+  initCodeTabs
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type { CodeTabsOptions } from "./src/types.js";
+export { initCodeTabs } from "./src/init.js";
+export { rehypeCodeTabs } from "./src/rehype.js";
+export { remarkCodeMeta } from "./src/remark.js";
+export type { CodeTabsClientOptions, CodeTabsOptions } from "./src/types.js";
+export declare function codeTabs(options?: CodeTabsOptions): import("@riebeckite/core").RiebeckitePlugin<CodeTabsOptions>;

package/dist/index.js

@@ -0,0 +1,320 @@
+// index.ts
+import {
+  createClientEntry,
+  createStyleAsset,
+  definePlugin
+} from "@riebeckite/core";
+
+// src/hast.ts
+function element(tagName, properties = {}, children = []) {
+  return { type: "element", tagName, properties, children };
+}
+function text(value) {
+  return { type: "text", value };
+}
+function isElementNode(node) {
+  return node.type === "element";
+}
+function getStringProperty(node, key) {
+  const value = getProperty(node, key);
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join(" ");
+  return null;
+}
+function getBooleanProperty(node, key) {
+  const value = getProperty(node, key);
+  return value === true || value === "true" || value === "";
+}
+function getProperty(node, key) {
+  const value = node.properties?.[key];
+  if (value !== void 0) return value;
+  const hyphenated = key.replace(
+    /[A-Z]/g,
+    (match) => `-${match.toLowerCase()}`
+  );
+  if (hyphenated !== key) return node.properties?.[hyphenated];
+  return void 0;
+}
+function mergeClassName(current, next) {
+  const currentClass = Array.isArray(current) ? current.join(" ") : typeof current === "string" ? current : "";
+  return currentClass ? `${currentClass} ${next}` : next;
+}
+
+// src/rehype.ts
+function rehypeCodeTabs(options = {}) {
+  let groupIndex = 0;
+  return (tree) => {
+    transformChildren(tree, options, () => {
+      groupIndex += 1;
+      return `rr-code-tabs-${groupIndex}`;
+    });
+  };
+}
+function transformChildren(node, options, nextGroupId) {
+  if (!hasChildren(node)) return;
+  const nextChildren = [];
+  let group = [];
+  const flushGroup = () => {
+    if (group.length === 0) return;
+    nextChildren.push(buildTabGroup(group, options, nextGroupId()));
+    group = [];
+  };
+  for (const child of node.children) {
+    if (isElementNode(child)) {
+      const tabBlock = getTabBlock(child);
+      if (tabBlock) {
+        group.push(tabBlock);
+        continue;
+      }
+      transformChildren(child, options, nextGroupId);
+    }
+    if (isWhitespaceOnlyText(child) && group.length > 0) continue;
+    flushGroup();
+    nextChildren.push(child);
+  }
+  flushGroup();
+  node.children = nextChildren;
+}
+function isWhitespaceOnlyText(node) {
+  return node.type === "text" && typeof node.value === "string" && node.value.trim().length === 0;
+}
+function buildTabGroup(group, options, groupId) {
+  return element(
+    "div",
+    {
+      className: "rr-code-tabs",
+      dataCodeTabs: "true",
+      dataCodeTabsSync: options.syncTabs ? "true" : void 0
+    },
+    [
+      element(
+        "div",
+        { className: "rr-code-tabs__tablist", role: "tablist" },
+        group.map(
+          (tab, index) => element(
+            "button",
+            {
+              type: "button",
+              className: "rr-code-tabs__tab",
+              role: "tab",
+              id: `${groupId}-tab-${index}`,
+              ariaControls: `${groupId}-panel-${index}`,
+              ariaSelected: index === 0 ? "true" : "false",
+              tabindex: index === 0 ? "0" : "-1",
+              dataCodeTabsTab: "true",
+              dataCodeTabsLabel: tab.label
+            },
+            [text(tab.label)]
+          )
+        )
+      ),
+      ...group.map(
+        (tab, index) => element(
+          "div",
+          {
+            className: "rr-code-tabs__panel",
+            role: "tabpanel",
+            id: `${groupId}-panel-${index}`,
+            ariaLabelledBy: `${groupId}-tab-${index}`,
+            dataCodeTabsPanel: "true",
+            dataCodeTabsLabel: tab.label,
+            dataActive: index === 0 ? "true" : "false"
+          },
+          [tab.node]
+        )
+      )
+    ]
+  );
+}
+function getTabBlock(node) {
+  if (!isCodeBlockRoot(node)) return null;
+  const metaOwner = findMetaOwner(node);
+  if (!metaOwner) return null;
+  const meta = getCodeMeta(metaOwner);
+  const label = meta ? parseTabLabel(meta) : null;
+  if (!label) return null;
+  removeTabMeta(metaOwner, meta);
+  node.properties = {
+    ...node.properties,
+    className: mergeClassName(node.properties?.className, "rr-code-tabs__code")
+  };
+  return { node, label };
+}
+function isCodeBlockRoot(node) {
+  if (node.tagName === "pre") return Boolean(findDirectChild(node, "code"));
+  return node.tagName === "figure" && getBooleanProperty(node, "dataRehypePrettyCodeFigure");
+}
+function findMetaOwner(node) {
+  if (hasCodeMeta(node)) return node;
+  if (node.tagName === "pre") return findDirectChild(node, "code") ?? node;
+  const pre = findDescendant(node, (element2) => element2.tagName === "pre");
+  if (pre) return findDirectChild(pre, "code") ?? pre;
+  return node;
+}
+function hasCodeMeta(node) {
+  return getCodeMeta(node) !== null;
+}
+function getCodeMeta(node) {
+  const dataMeta = typeof node.data?.meta === "string" ? node.data.meta : null;
+  return dataMeta ?? getStringProperty(node, "meta") ?? getStringProperty(node, "dataMeta") ?? getStringProperty(node, "data-meta") ?? getStringProperty(node, "metastring");
+}
+function parseTabLabel(meta) {
+  const match = meta.match(/(?:^|\s)tab=("([^"]*)"|'([^']*)'|([^\s]+))/);
+  const label = match?.[2] ?? match?.[3] ?? match?.[4] ?? null;
+  const trimmed = label?.trim();
+  return trimmed ? trimmed : null;
+}
+function removeTabMeta(node, meta) {
+  const nextMeta = meta.replace(/(?:^|\s)tab=("[^"]*"|'[^']*'|[^\s]+)/, "").trim();
+  node.properties = { ...node.properties };
+  for (const key of ["meta", "dataMeta", "data-meta", "metastring"]) {
+    if (node.properties[key] === meta) {
+      if (nextMeta) node.properties[key] = nextMeta;
+      else delete node.properties[key];
+    }
+  }
+  if (node.data && node.data.meta === meta) {
+    if (nextMeta) node.data.meta = nextMeta;
+    else delete node.data.meta;
+  }
+}
+function findDescendant(node, predicate) {
+  for (const child of node.children ?? []) {
+    if (!isElementNode(child)) continue;
+    if (predicate(child)) return child;
+    const match = findDescendant(child, predicate);
+    if (match) return match;
+  }
+  return null;
+}
+function findDirectChild(node, tagName) {
+  return node.children?.find(
+    (child) => child.type === "element" && child.tagName === tagName
+  ) ?? null;
+}
+function hasChildren(node) {
+  return Array.isArray(node.children);
+}
+
+// src/remark.ts
+function remarkCodeMeta() {
+  return (tree) => {
+    visitMdast(tree, (node) => {
+      if (node.type !== "code") return;
+      if (typeof node.meta !== "string" || node.meta.trim() === "") return;
+      node.data = {
+        ...node.data ?? {},
+        hProperties: {
+          ...node.data?.hProperties,
+          "data-meta": node.meta
+        }
+      };
+    });
+  };
+}
+function visitMdast(node, visitor) {
+  visitor(node);
+  for (const child of node.children ?? []) visitMdast(child, visitor);
+}
+
+// src/init.ts
+var SELECTOR = "[data-code-tabs='true']";
+var TAB_SELECTOR = "[data-code-tabs-tab='true']";
+var PANEL_SELECTOR = "[data-code-tabs-panel='true']";
+function initCodeTabs(options = {}) {
+  const groups = getGroups();
+  for (const group of groups) initializeGroup(group, options);
+}
+function initializeGroup(group, options) {
+  const tabs = getTabs(group);
+  const panels = getPanels(group);
+  if (tabs.length === 0 || panels.length === 0) return;
+  const initialIndex = tabs.findIndex(
+    (tab) => tab.getAttribute("aria-selected") === "true"
+  );
+  activateTab(group, Math.max(initialIndex, 0), { focus: false, sync: false });
+  for (const [index, tab] of tabs.entries()) {
+    tab.addEventListener("click", () => {
+      activateTab(group, index, {
+        focus: true,
+        sync: options.syncTabs === true
+      });
+    });
+    tab.addEventListener("keydown", (event) => {
+      const nextIndex = getKeyboardTargetIndex(event, index, tabs.length);
+      if (nextIndex === null) return;
+      event.preventDefault();
+      activateTab(group, nextIndex, {
+        focus: true,
+        sync: options.syncTabs === true
+      });
+    });
+  }
+}
+function activateTab(group, index, behavior) {
+  const tabs = getTabs(group);
+  const panels = getPanels(group);
+  const selectedTab = tabs[index];
+  if (!selectedTab) return;
+  for (const [tabIndex, tab] of tabs.entries()) {
+    const selected = tabIndex === index;
+    tab.setAttribute("aria-selected", selected ? "true" : "false");
+    tab.tabIndex = selected ? 0 : -1;
+  }
+  for (const [panelIndex, panel] of panels.entries()) {
+    const selected = panelIndex === index;
+    panel.dataset.active = selected ? "true" : "false";
+    panel.hidden = !selected;
+  }
+  if (behavior.focus) selectedTab.focus();
+  if (!behavior.sync || group.dataset.codeTabsSync !== "true") return;
+  const label = selectedTab.dataset.codeTabsLabel;
+  if (!label) return;
+  for (const otherGroup of getGroups()) {
+    if (otherGroup === group || otherGroup.dataset.codeTabsSync !== "true")
+      continue;
+    const otherIndex = getTabs(otherGroup).findIndex(
+      (tab) => tab.dataset.codeTabsLabel === label
+    );
+    if (otherIndex >= 0) {
+      activateTab(otherGroup, otherIndex, { focus: false, sync: false });
+    }
+  }
+}
+function getKeyboardTargetIndex(event, currentIndex, total) {
+  if (event.key === "ArrowLeft") return (currentIndex + total - 1) % total;
+  if (event.key === "ArrowRight") return (currentIndex + 1) % total;
+  if (event.key === "Home") return 0;
+  if (event.key === "End") return total - 1;
+  if (event.key === "Enter" || event.key === " ") return currentIndex;
+  return null;
+}
+function getGroups() {
+  return Array.from(document.querySelectorAll(SELECTOR));
+}
+function getTabs(group) {
+  return Array.from(group.querySelectorAll(TAB_SELECTOR));
+}
+function getPanels(group) {
+  return Array.from(group.querySelectorAll(PANEL_SELECTOR));
+}
+
+// index.ts
+function codeTabs(options = {}) {
+  return definePlugin({
+    name: "code-tabs",
+    options,
+    remarkPlugins: [remarkCodeMeta],
+    extendHtmlPipeline: (pipeline) => {
+      pipeline.use(rehypeCodeTabs, options);
+    },
+    assets: [createStyleAsset("code-tabs")],
+    clientEntries: [createClientEntry("code-tabs", "initCodeTabs")]
+  });
+}
+export {
+  codeTabs,
+  initCodeTabs,
+  rehypeCodeTabs,
+  remarkCodeMeta
+};

package/dist/src/hast.d.ts

@@ -0,0 +1,7 @@
+import type { ElementNode, HastNode, TextNode } from "./types.js";
+export declare function element(tagName: string, properties?: Record<string, unknown>, children?: HastNode[]): ElementNode;
+export declare function text(value: string): TextNode;
+export declare function isElementNode(node: HastNode): node is ElementNode;
+export declare function getStringProperty(node: ElementNode, key: string): string | null;
+export declare function getBooleanProperty(node: ElementNode, key: string): boolean;
+export declare function mergeClassName(current: unknown, next: string): string;

package/dist/src/init.d.ts

@@ -0,0 +1,2 @@
+import type { CodeTabsClientOptions } from "./types.js";
+export declare function initCodeTabs(options?: CodeTabsClientOptions): void;

package/dist/src/rehype.d.ts

@@ -0,0 +1,2 @@
+import type { CodeTabsOptions, HastNode } from "./types.js";
+export declare function rehypeCodeTabs(options?: CodeTabsOptions): (tree: HastNode) => void;

package/dist/src/remark.d.ts

@@ -0,0 +1 @@
+export declare function remarkCodeMeta(): (tree: unknown) => void;

package/dist/src/types.d.ts

@@ -0,0 +1,19 @@
+export type CodeTabsOptions = {
+    syncTabs?: boolean;
+};
+export type CodeTabsClientOptions = CodeTabsOptions;
+export type ElementNode = {
+    type: string;
+    tagName?: string;
+    properties?: Record<string, unknown>;
+    data?: Record<string, unknown>;
+    children?: HastNode[];
+};
+export type TextNode = {
+    type: "text";
+    value: string;
+};
+export type HastNode = ElementNode | TextNode | {
+    type: string;
+    [key: string]: unknown;
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@riebeckite/plugin-code-tabs",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "source": "./index.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "source": "./client.ts",
+      "default": "./dist/client.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "dependencies": {
+    "@riebeckite/core": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "README_ja.md",
+    "dist",
+    "style.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rerurate514/riebeckite.git",
+    "directory": "packages/plugins/code-tabs"
+  },
+  "homepage": "https://github.com/Rerurate514/riebeckite#readme",
+  "bugs": {
+    "url": "https://github.com/Rerurate514/riebeckite/issues"
+  },
+  "description": "Accessible tabbed code blocks for Riebeckite.",
+  "keywords": [
+    "riebeckite",
+    "plugin",
+    "code-blocks",
+    "tabs"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "node ../../../scripts/build_package.mjs"
+  }
+}

package/style.css

@@ -0,0 +1,84 @@
+.rr-code-tabs {
+  margin-block: 1.5rem;
+  border: 1px solid
+    var(--rb-color-border, color-mix(in srgb, currentColor 16%, transparent));
+  background: var(--rb-color-surface, transparent);
+}
+
+.rr-code-tabs__tablist {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  padding: 0.5rem 0.5rem 0;
+  border-bottom: 1px solid
+    var(--rb-color-border, color-mix(in srgb, currentColor 16%, transparent));
+  scrollbar-width: thin;
+}
+
+.rr-code-tabs__tab {
+  appearance: none;
+  flex: 0 0 auto;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 0.5rem 0.5rem 0 0;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  color: var(--rb-color-muted, currentColor);
+  font: inherit;
+  font-size: 0.875em;
+  line-height: 1.3;
+  cursor: pointer;
+}
+
+.rr-code-tabs__tab:hover {
+  color: var(--rb-color-ink, currentColor);
+  background: var(
+    --rb-color-muted,
+    color-mix(in srgb, currentColor 6%, transparent)
+  );
+}
+
+.rr-code-tabs__tab:focus-visible {
+  outline: 2px solid var(--rb-color-accent, currentColor);
+  outline-offset: -2px;
+}
+
+.rr-code-tabs__tab[aria-selected="true"] {
+  border-color: var(
+    --rb-color-border,
+    color-mix(in srgb, currentColor 16%, transparent)
+  );
+  background: var(--rb-color-paper, Canvas);
+  color: var(--rb-color-ink, currentColor);
+}
+
+.rr-code-tabs__panel {
+  padding: 0;
+}
+
+.rr-code-tabs__panel > :first-child {
+  margin-top: 0;
+}
+
+.rr-code-tabs__panel > :last-child {
+  margin-bottom: 0;
+}
+
+.rr-code-tabs__panel[hidden] {
+  display: none;
+}
+
+.rr-code-tabs__code {
+  margin-block: 0;
+}
+
+@media (max-width: 640px) {
+  .rr-code-tabs {
+    margin-inline: calc(var(--rr-content-inline-padding, 0px) * -1);
+    border-inline: 0;
+  }
+
+  .rr-code-tabs__tab {
+    padding-inline: 0.625rem;
+  }
+}