ab-nextjs-components 0.1.9 → 0.1.11

package/ab-icon/styles.module.css

@@ -4,7 +4,30 @@
 * ab-nextjs-components
 * ~~~~~~~~~~~~ 
 * Copyright (c) 2026 Abraham Ukachi. The abElements Project.
-* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-components
+* @name: AbIcon - Styles (G2)
+* @file: ab-icon/styles.module.css
+* @type: CSS module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -13,15 +36,36 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+/* 🔣 SVG icon box */
 .abIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  line-height: 1;
-  user-select: none;
+  display: inline-flex; /* 📐 */
+  flex: none; /* 🚫 squash */
+  width: var(--ab-icon-size, 24px); /* 📏 */
+  height: var(--ab-icon-size, 24px); /* 📏 */
+  line-height: 0; /* 🧹 no baseline gap */
+  color: inherit; /* 🎨 currentColor flows into the SVG */
 }
 
-.abIcon[data-filled='true'] {
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+/* 📐 the inline SVG fills the box */
+.abIcon > svg {
+  width: 100%; /* ↔️ */
+  height: 100%; /* ↕️ */
+}
+
+/* 📏 weight: CSS beats SVG presentation attributes, outlined only (filled stay solid) */
+.abIcon[data-variant='outlined'] > svg [stroke] {
+  stroke-width: var(--ab-icon-stroke, 1.25); /* ✏️ */
+}
+
+/* 🕰️ Material Symbols fallback (unchanged from pre-G2) */
+.abIconFont {
+  display: inline-flex; /* 📐 */
+  align-items: center; /* ↕️ */
+  justify-content: center; /* ↔️ */
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* 🔤 */
+  line-height: 1; /* 📏 */
+  user-select: none; /* 🚫 */
+}
+.abIconFont[data-filled='true'] {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* ⬛ */
 }

package/ab-icon-button/index.tsx

@@ -5,103 +5,167 @@
 * ~~~~~~~~~~~~ 
 * Copyright (c) 2026 Abraham Ukachi. The abElements Project.
 *
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
 * @project: ab-nextjs-components
 * @name: AbIconButton - Client
 * @file: ab-icon-button/index.tsx
+* @type: Component (client) — G6: accessible name on the interactive element
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*
+* Example usage:
+*   1+|> <AbIconButton icon="arrow_back" label={t('back')} onClick={prev} />
+*    -|> <AbIconButton icon="open_in_new" href="/docs" label="Open docs" /> // 🔗 link variant is named too
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
 'use client';
 
+// ⚛️ React types + forwardRef
 import type { CSSProperties, MouseEvent } from 'react';
 import { forwardRef } from 'react';
+// 🧵 class-name joiner
 import clsx from 'clsx';
+// 🎨 package-shipped CSS module
 import styles from './styles.module.css';
+import { AB_MOTION } from 'ab-nextjs-animations/motion'; // 🎬 transition class names (ab-nextjs-animations >= 0.2.4)
+import 'ab-nextjs-animations/motion/styles.css'; // 🎨 .ab-motion-*
 
+// ⚙️ public props
 export interface AbIconButtonProps {
+  // 🏷️ extra classes
   className?: string;
+  // 🎨 inline style
   style?: CSSProperties;
+  // 🙈 hide the whole button
   hidden?: boolean;
+  // 🔣 Material Symbols ligature name (AbIcons-backed AbIcon arrives with G2)
   icon: string;
+  // 🚫 disabled (button: native `disabled`; link: `aria-disabled` + no href)
   disabled?: boolean;
+  // 🔍 grow a little on hover
   expands?: boolean;
+  // 🤏 shrink a little when pressed
   shrinks?: boolean;
+  // ⌨️ custom tab index
   tabIndex?: number;
+  // 🖱️ click handler (button variant)
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  // 🔗 turns the button into a link
   href?: string;
+  // ✅ active / selected look
   active?: boolean;
+  // 🫥 no hover background
   naked?: boolean;
+  // ⏳ show a spinner instead of the icon (button variant)
   isLoading?: boolean;
+  // ♿ G6: accessible name (preferred; translate it). Falls back to `title`.
+  label?: string;
+  // 💬 tooltip text; also the accessible name when `label` is missing (pre-G6 callers)
   title?: string;
+  // 🧾 button type
   type?: 'button' | 'submit' | 'reset';
 }
 
 const AbIconButton = forwardRef<HTMLButtonElement, AbIconButtonProps>(function AbIconButton(props, ref) {
+  // 🧩 destructure with defaults
   const {
-    className,
-    style,
-    hidden = false,
-    icon,
-    disabled = false,
-    expands = false,
-    shrinks = false,
-    tabIndex,
-    onClick,
-    href,
-    active = false,
-    naked = false,
-    isLoading = false,
-    title,
-    type = 'button',
+    className, // 🏷️
+    style, // 🎨
+    hidden = false, // 👀
+    icon, // 🔣
+    disabled = false, // 🚦
+    expands = false, // 🔍
+    shrinks = false, // 🤏
+    tabIndex, // ⌨️
+    onClick, // 🖱️
+    href, // 🔗
+    active = false, // ✅
+    naked = false, // 🫥
+    isLoading = false, // ⏳
+    label, // ♿
+    title, // 💬
+    type = 'button', // 🧾
   } = props;
 
-  const classNames = clsx('AbIconButton', 'icon-button', styles.abIconButton, className);
+  // ♿ G6: one accessible name for both variants, ON the interactive element (not the wrapper span)
+  const name = label ?? title;
+  // 💬 tooltip: explicit title wins, else reuse the name so sighted mouse users see it too
+  const tooltip = title ?? label;
+  // 🏷️ classes
+  const classNames = clsx('AbIconButton', 'icon-button', styles.abIconButton, AB_MOTION.interactive, expands && AB_MOTION.lift, shrinks && AB_MOTION.press, className); // 🎬 hover lift / press from ab-nextjs-animations
+  // 🔣 the glyph is decoration: the ligature text ("arrow_back") must never be read aloud
+  const glyph = <span className={clsx('material-symbols-rounded', 'icon')} aria-hidden="true">{icon}</span>;
 
+  // 🔗 link variant
   if (href && !isLoading) {
     return (
-      <span hidden={hidden} className={styles.wrap} title={title}>
+      <span hidden={hidden} className={styles.wrap}>
         <a
-          href={disabled ? undefined : href}
-          role="button"
-          className={classNames}
-          style={style}
-          data-active={String(active)}
-          data-naked={String(naked)}
-          data-expands={String(expands)}
-          data-shrinks={String(shrinks)}
-          tabIndex={tabIndex ?? 0}
-          aria-disabled={disabled}
+          href={disabled ? undefined : href} // 🚫 a disabled link has no target
+          className={classNames} // 🏷️
+          style={style} // 🎨
+          aria-label={name} // ♿ G6: the href variant is named now
+          title={tooltip} // 💬 on the link, not the wrapper
+          aria-disabled={disabled || undefined} // 🚦
+          data-active={String(active)} // ✅
+          data-naked={String(naked)} // 🫥
+          data-expands={String(expands)} // 🔍
+          data-shrinks={String(shrinks)} // 🤏
+          tabIndex={tabIndex ?? (disabled ? -1 : 0)} // ⌨️ a disabled link leaves the tab order
         >
-          <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
+          {glyph}
         </a>
       </span>
     );
   }
 
+  // 🔘 button variant
   return (
-    <span hidden={hidden} className={styles.wrap} title={title}>
+    <span hidden={hidden} className={styles.wrap}>
       <button
-        ref={ref}
-        type={type}
-        className={classNames}
-        style={style}
-        disabled={disabled || isLoading}
-        data-active={String(active)}
-        data-naked={String(naked)}
-        data-expands={String(expands)}
-        data-shrinks={String(shrinks)}
-        onClick={onClick}
-        tabIndex={tabIndex ?? 0}
-        aria-label={title}
+        ref={ref} // 🔗
+        type={type} // 🧾
+        className={classNames} // 🏷️
+        style={style} // 🎨
+        disabled={disabled || isLoading} // 🚦
+        aria-label={name} // ♿ accessible name
+        title={tooltip} // 💬 tooltip on the button itself
+        aria-busy={isLoading || undefined} // ⏳ announce loading
+        data-active={String(active)} // ✅
+        data-naked={String(naked)} // 🫥
+        data-expands={String(expands)} // 🔍
+        data-shrinks={String(shrinks)} // 🤏
+        onClick={onClick} // 🖱️
+        tabIndex={tabIndex ?? 0} // ⌨️
       >
-        {isLoading ? (
-          <span className={clsx('spinner', 'dots-12', styles.spinner)} />
-        ) : (
-          <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
-        )}
+        {isLoading ? <span className={clsx('spinner', 'dots-12', styles.spinner)} aria-hidden="true" /> : glyph}
       </button>
     </span>
   );
 });
 
+// 📦 exports
 export default AbIconButton;
 export { AbIconButton };

package/ab-icon-button/styles.module.css

@@ -2,7 +2,32 @@
 * @license MIT
 * ~~~~~~~~~~~~
 * ab-nextjs-components
-* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-components
+* @name: styles.module.css
+* @file: ab-icon-button/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -11,6 +36,7 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+
 .wrap {
   display: inline-block;
   width: fit-content;
@@ -33,7 +59,7 @@
   cursor: pointer;
   background: transparent;
   color: inherit;
-  transition: background-color 0.2s ease, transform 0.2s ease;
+  /* 🎬 motion: .ab-motion-interactive (+ .ab-motion-lift / .ab-motion-press) from ab-nextjs-animations */
 }
 
 .abIconButton:hover {
@@ -44,14 +70,6 @@
   background-color: transparent;
 }
 
-.abIconButton[data-expands='true']:hover {
-  transform: scale(1.06);
-}
-
-.abIconButton[data-shrinks='true']:active {
-  transform: scale(0.94);
-}
-
 .abIconButton:disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/ab-install-snippet/helpers.ts

@@ -0,0 +1,62 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-components
+* @name: AbInstallSnippet - Helpers (G35)
+* @file: ab-install-snippet/helpers.ts
+* @type: TypeScript (pure, server-safe)
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+// 📦 supported package managers
+export type AbPackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun';
+
+// 🗂️ default tab order (mocks: pnpm first)
+export const AB_PACKAGE_MANAGERS: readonly AbPackageManager[] = ['pnpm', 'npm', 'yarn', 'bun'] as const;
+
+// 🔍 narrow an unknown (e.g. from localStorage) to a manager
+export function isAbPackageManager(value: unknown): value is AbPackageManager {
+  return value === 'pnpm' || value === 'npm' || value === 'yarn' || value === 'bun'; // ✅
+}
+
+/**
+ * @name getAbInstallCommand
+ * @description 🧾 The install command for a manager. Package names are never translated.
+ * @example getAbInstallCommand('npm', 'ab-nextjs-core') // "npm i ab-nextjs-core"
+ */
+export function getAbInstallCommand(pm: AbPackageManager, pkg: string, dev = false): string {
+  switch (pm) {
+    case 'npm': return `npm i ${dev ? '-D ' : ''}${pkg}`; // 📦
+    case 'yarn': return `yarn add ${dev ? '-D ' : ''}${pkg}`; // 🧶
+    case 'bun': return `bun add ${dev ? '-d ' : ''}${pkg}`; // 🥟
+    default: return `pnpm add ${dev ? '-D ' : ''}${pkg}`; // ⚡ pnpm
+  }
+}

package/ab-install-snippet/index.tsx

@@ -0,0 +1,170 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-components
+* @name: AbInstallSnippet - Client (G35)
+* @file: ab-install-snippet/index.tsx
+* @type: Component (client) — package-manager tabs + command + copy
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*
+* Example usage:
+*   1+|> <AbInstallSnippet pkg="ab-nextjs-core" storageKey="ab-welcome-pm" labels={{ group: t('install.label', { pkg }), copy: t('install.copy'), copied: t('install.copied') }} />
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+'use client';
+
+// ⚛️ React
+import type { CSSProperties, KeyboardEvent } from 'react';
+import { useId, useRef, useState } from 'react';
+// 🧵 classes
+import clsx from 'clsx';
+// 📋 clipboard + 🗄️ persisted choice (hooks ≥ 0.1.6, deep imports)
+import { useAbClipboard } from 'ab-nextjs-hooks/useAbClipboard';
+import { useAbLocalStorage } from 'ab-nextjs-hooks/useAbLocalStorage';
+// 🔘 copy button (G6-fixed)
+import AbIconButton from '../ab-icon-button';
+// 🧮 pure helpers
+import { AB_PACKAGE_MANAGERS, getAbInstallCommand, isAbPackageManager, type AbPackageManager } from './helpers';
+// 🎨 styles
+import styles from './styles.module.css';
+
+// 📦 re-export helpers for convenience
+export * from './helpers';
+
+// 🏷️ i18n labels
+export interface AbInstallSnippetLabels {
+  group: string; // 🗂️ "Install ab-nextjs-core" (tablist name)
+  copy: string; // 📋 "Copy command"
+  copied: string; // ✅ "Copied" (announced politely)
+}
+
+// ⚙️ props
+export interface AbInstallSnippetProps {
+  pkg: string; // 📦 package name (not translated)
+  labels: AbInstallSnippetLabels; // 🏷️
+  managers?: readonly AbPackageManager[]; // 🗂️ default pnpm, npm, yarn, bun
+  storageKey?: string; // 🗄️ persist + sync the choice across snippets (e.g. 'ab-welcome-pm')
+  defaultManager?: AbPackageManager; // 🌱 default 'pnpm'
+  dev?: boolean; // 🛠️ dev dependency flag
+  className?: string; // 🏷️
+  style?: CSSProperties; // 🎨
+}
+
+// 🧠 state source: persisted (shared across instances) or local
+type PmState = readonly [AbPackageManager, (pm: AbPackageManager) => void];
+
+/** 🗄️ persisted variant (hooks can't be conditional, so it's its own component) */
+function PersistedSnippet(props: AbInstallSnippetProps & { storageKey: string }) {
+  const fallback = props.defaultManager ?? 'pnpm'; // 🌱
+  const [raw, setRaw] = useAbLocalStorage<string>(props.storageKey, fallback); // 🗄️ syncs every snippet with this key
+  const pm = isAbPackageManager(raw) ? raw : fallback; // 🧯 ignore junk in storage
+  return <SnippetView {...props} state={[pm, setRaw]} />;
+}
+
+/** 🧠 local variant */
+function LocalSnippet(props: AbInstallSnippetProps) {
+  const [pm, setPm] = useState<AbPackageManager>(props.defaultManager ?? 'pnpm'); // 🧠
+  return <SnippetView {...props} state={[pm, setPm]} />;
+}
+
+/** 🖼️ the actual UI */
+function SnippetView({ pkg, labels, managers = AB_PACKAGE_MANAGERS, dev = false, className, style, state }: AbInstallSnippetProps & { state: PmState }) {
+  const [pm, setPm] = state; // 🎚️
+  const current = managers.includes(pm) ? pm : managers[0]; // 🧯 stored pm not offered here
+  const command = getAbInstallCommand(current, pkg, dev); // 🧾
+  const { copy, copied } = useAbClipboard(); // 📋
+  const base = useId(); // 🆔 tab/panel ids
+  const tabs = useRef<Array<HTMLButtonElement | null>>([]); // 📍 roving focus
+
+  // ⌨️ APG tabs: arrows move + select (automatic activation), Home/End
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const i = managers.indexOf(current); // 📍
+    const rtl = event.currentTarget.closest('[dir]')?.getAttribute('dir') === 'rtl'; // 🌍
+    const nextKey = rtl ? 'ArrowLeft' : 'ArrowRight'; // ➡️
+    const prevKey = rtl ? 'ArrowRight' : 'ArrowLeft'; // ⬅️
+    let j: number | null = null; // 🎯
+    if (event.key === nextKey) j = (i + 1) % managers.length; // ⏭️
+    else if (event.key === prevKey) j = (i - 1 + managers.length) % managers.length; // ⏮️
+    else if (event.key === 'Home') j = 0; // ⏮️⏮️
+    else if (event.key === 'End') j = managers.length - 1; // ⏭️⏭️
+    if (j === null) return; // 🙅
+    event.preventDefault(); // 🛑
+    event.stopPropagation(); // 🛑 the carousel must not also move
+    setPm(managers[j]); // ✅
+    tabs.current[j]?.focus(); // 🎯
+  };
+
+  return (
+    <div className={clsx('AbInstallSnippet', styles.root, className)} style={style} data-ab-part="install-snippet" data-ab-swipe-ignore="">
+      {/* 🗂️ manager tabs */}
+      <div role="tablist" aria-label={labels.group} className={styles.tabs} onKeyDown={onKeyDown}>
+        {managers.map((m, i) => (
+          <button
+            key={m} // 🔑
+            ref={(el) => { tabs.current[i] = el; }} // 📍
+            id={`${base}-tab-${m}`} // 🆔
+            type="button" // 🧾
+            role="tab" // ♿
+            aria-selected={m === current} // ✅
+            aria-controls={`${base}-panel`} // 🔗
+            tabIndex={m === current ? 0 : -1} // ⌨️ roving
+            className={styles.tab} // 🎨
+            onClick={() => setPm(m)} // 🖱️
+          >
+            {m}
+          </button>
+        ))}
+      </div>
+      {/* 🧾 command panel */}
+      <div id={`${base}-panel`} role="tabpanel" aria-labelledby={`${base}-tab-${current}`} className={styles.panel}>
+        <span className={styles.prompt} aria-hidden="true">$</span>{/* 💲 decorative prompt */}
+        <code className={styles.code}>{command}</code>
+        <AbIconButton
+          icon={copied ? 'check' : 'content_copy'} // 📋 / ✅
+          label={labels.copy} // ♿ name stays "Copy command"
+          naked // 🫥
+          className={styles.copy} // 🎨
+          onClick={() => { void copy(command); }} // 📋
+        />
+      </div>
+      {/* 📣 own polite live region */}
+      <span className={styles.srOnly} aria-live="polite" role="status">{copied ? labels.copied : ''}</span>
+    </div>
+  );
+}
+
+/** 📦 Install box: pnpm / npm / yarn / bun tabs + command + copy + "Copied" announcement. */
+export function AbInstallSnippet(props: AbInstallSnippetProps) {
+  return props.storageKey ? <PersistedSnippet {...props} storageKey={props.storageKey} /> : <LocalSnippet {...props} />;
+}
+
+// 📦 default export
+export default AbInstallSnippet;