diff --git a/package.json b/package.json
index 912b2be4e..aa057322f 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "style-loader": "4.0.0",
     "tasuku": "^2.0.4",
     "typescript": "5.9.3",
+    "uqr": "^0.1.3",
     "victory": "37.3.6",
     "webpack": "5.104.1",
     "webpack-cli": "6.0.1",
diff --git a/songs.schema.json b/songs.schema.json
index 399af5598..01d5df3c5 100644
--- a/songs.schema.json
+++ b/songs.schema.json
@@ -208,9 +208,6 @@
         "jacket": {
           "type": "string"
         },
-        "author": {
-          "type": "string"
-        },
         "bpm": {
           "type": "string",
           "description": "per-chart BPM range, if one applies"
diff --git a/src/assets/i18n.json b/src/assets/i18n.json
index 75feeaf84..f35677a99 100644
--- a/src/assets/i18n.json
+++ b/src/assets/i18n.json
@@ -6,6 +6,19 @@
     },
     "clearDrawings": "Clear Draws",
     "clearDrawingsConfirm": "This will clear all songs drawn so far. Confirm?",
+    "dataImport": {
+      "title": "Data Import",
+      "smxEdits": "StepManiaX edits…",
+      "itgPack": "ITG / StepMania pack…"
+    },
+    "smxImport": {
+      "detected": "{count, plural, =0 {No codes detected yet} one {# unique code detected} other {# unique codes detected}}",
+      "lookingUp": "Looking them up now…",
+      "found": "{count, plural, one {Found info for # chart.} other {Found info for # charts.}}",
+      "importButton": "{count, plural, =0 {Import} one {Import # edit} other {Import # edits}}",
+      "imported": "{count, plural, one {Imported # edit chart.} other {Imported # edit charts.}}",
+      "skipped": "{count, plural, one { # edit was skipped because its song isn't in the StepManiaX data yet.} other { # edits were skipped because their songs aren't in the StepManiaX data yet.}}"
+    },
     "credits": "Credits",
     "help": "Help",
     "toggleTheme": "Toggle Theme",
@@ -119,6 +132,19 @@
     },
     "clearDrawings": "全消去",
     "clearDrawingsConfirm": "これまでに引いた譜面をすべて消去します。よろしいですか？",
+    "dataImport": {
+      "title": "データの取り込み",
+      "smxEdits": "StepManiaX エディット…",
+      "itgPack": "ITG / StepMania パック…"
+    },
+    "smxImport": {
+      "detected": "{count, plural, =0 {コードはまだ検出されていません} other {# 件のコードを検出しました}}",
+      "lookingUp": "照会中…",
+      "found": "{count, plural, other {# 件の譜面情報が見つかりました。}}",
+      "importButton": "{count, plural, =0 {取り込む} other {# 件のエディットを取り込む}}",
+      "imported": "{count, plural, other {# 件のエディット譜面を取り込みました。}}",
+      "skipped": "{count, plural, other { # 件のエディットは対象曲が StepManiaX データに未登録のためスキップされました。}}"
+    },
     "credits": "クレジット",
     "help": "使い方 (English)",
     "toggleTheme": "テーマを切り替える",
diff --git a/src/drop-handler.tsx b/src/drop-handler.tsx
index 645468543..014fde8a8 100644
--- a/src/drop-handler.tsx
+++ b/src/drop-handler.tsx
@@ -2,48 +2,48 @@ import {
   Button,
   Classes,
   Dialog,
+  DialogBody,
   DialogFooter,
   FormGroup,
   Switch,
 } from "@blueprintjs/core";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { PackWithSongs } from "simfile-parser/browser";
 import { useDrawState } from "./draw-state";
+import { useImportUi } from "./state/import-ui";
 import { getDataFileFromPack } from "./utils/itg-import";
 import { pause } from "./utils/pause";
 import { convertErrorToString } from "./utils/error-to-string";
-import { Import } from "@blueprintjs/icons";
+import { FolderOpen, Import } from "@blueprintjs/icons";
+import { SmxEditImport } from "./smx-edit-import";
 
 function loadParserModule() {
   return import("simfile-parser/browser");
 }
 
 export function DropHandler() {
-  const [droppedFolder, setDroppedFolder] = useState<DataTransferItem | null>(
-    null,
-  );
-
-  const handleClose = useCallback(() => {
-    setDroppedFolder(null);
-  }, []);
+  const setPackSource = useImportUi((s) => s.setPackSource);
 
-  const handleDrop = useCallback(async (evt: DragEvent) => {
-    console.log("handle drop");
-    evt.preventDefault();
-    if (!evt.dataTransfer) {
-      return;
-    }
+  const handleDrop = useCallback(
+    async (evt: DragEvent) => {
+      console.log("handle drop");
+      evt.preventDefault();
+      if (!evt.dataTransfer) {
+        return;
+      }
 
-    if (evt.dataTransfer.items.length !== 1) {
-      console.error("too many items dropped");
-      return;
-    }
-    try {
-      setDroppedFolder(evt.dataTransfer.items[0]);
-    } catch (e) {
-      console.log(e);
-    }
-  }, []);
+      if (evt.dataTransfer.items.length !== 1) {
+        console.error("too many items dropped");
+        return;
+      }
+      try {
+        setPackSource(evt.dataTransfer.items[0]);
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    [setPackSource],
+  );
 
   const handleDragOver = useCallback(async (e: Event) => {
     e.preventDefault();
@@ -61,22 +61,79 @@ export function DropHandler() {
   });
 
   return (
-    <ConfirmPackDialog
-      droppedFolder={droppedFolder}
-      onClose={handleClose}
-      onSave={handleClose}
-    />
+    <>
+      <ItgInstructionsDialog />
+      <ConfirmPackDialog />
+      <SmxEditImport />
+    </>
   );
 }
 
-interface DialogProps {
-  droppedFolder: DataTransferItem | null;
-  onSave(this: void): void;
-  onClose(this: void): void;
+/**
+ * First step of the manual ITG import: explain what to select, then let the user
+ * pick a pack folder with a native directory picker. The chosen folder flows
+ * into the same confirm dialog used by drag/drop.
+ */
+function ItgInstructionsDialog() {
+  const isOpen = useImportUi((s) => s.itgInstructionsOpen);
+  const onClose = useImportUi((s) => s.closeItgInstructions);
+  const setPackSource = useImportUi((s) => s.setPackSource);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = useCallback(() => {
+    const input = inputRef.current;
+    if (input && input.files && input.files.length) {
+      setPackSource(input);
+    }
+  }, [setPackSource]);
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title="Import an ITG/StepMania Pack"
+      icon={<FolderOpen />}
+      onClose={onClose}
+    >
+      <DialogBody>
+        <p>
+          Choose the folder of the pack you&apos;d like to import. This is the
+          folder that contains one subfolder per song (each with its own{" "}
+          <code>.sm</code> or <code>.ssc</code> simfile).
+        </p>
+        <p>
+          You can also drag and drop that folder anywhere onto this page to
+          start the same import.
+        </p>
+        <input
+          ref={inputRef}
+          type="file"
+          // @ts-expect-error non-standard attributes for directory selection
+          webkitdirectory=""
+          directory=""
+          style={{ display: "none" }}
+          onChange={handleChange}
+        />
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <>
+            <Button
+              intent="primary"
+              icon={<FolderOpen />}
+              onClick={() => inputRef.current?.click()}
+            >
+              Choose folder…
+            </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </>
+        }
+      />
+    </Dialog>
+  );
 }
 
 function useDataParsing(
-  droppedFolder: DataTransferItem | null,
+  packSource: DataTransferItem | HTMLInputElement | null,
   setTiered: (next: boolean) => void,
 ) {
   const [parsedPack, setParsedPack] = useState<PackWithSongs | null>(null);
@@ -84,12 +141,12 @@ function useDataParsing(
   useEffect(() => {
     // oxlint-disable-next-line react-hooks-js/set-state-in-effect
     setParseError(null);
-    if (!droppedFolder) {
+    if (!packSource) {
       setParsedPack(null);
       return;
     }
     loadParserModule()
-      .then(({ parsePack }) => parsePack(droppedFolder))
+      .then(({ parsePack }) => parsePack(packSource))
       .then((pack) => {
         setParsedPack(pack);
         if (
@@ -107,19 +164,21 @@ function useDataParsing(
         console.error(rejection);
         setParseError(convertErrorToString(rejection));
       });
-  }, [droppedFolder, setTiered]);
+  }, [packSource, setTiered]);
   return {
     parsedPack,
     parseError,
   };
 }
 
-function ConfirmPackDialog({ droppedFolder, onClose, onSave }: DialogProps) {
+function ConfirmPackDialog() {
+  const packSource = useImportUi((s) => s.packSource);
+  const clearPackSource = useImportUi((s) => s.clearPackSource);
   const [tiered, setTiered] = useState(false);
   const [saving, setSaving] = useState(false);
   const loadGameData = useDrawState((s) => s.addImportedData);
 
-  const { parsedPack, parseError } = useDataParsing(droppedFolder, setTiered);
+  const { parsedPack, parseError } = useDataParsing(packSource, setTiered);
   const derivedData = useMemo(() => {
     if (!parsedPack) {
       return;
@@ -135,8 +194,8 @@ function ConfirmPackDialog({ droppedFolder, onClose, onSave }: DialogProps) {
     loadGameData(parsedPack.name, derivedData);
     await pause(500);
     setSaving(false);
-    onSave();
-  }, [parsedPack, derivedData, loadGameData, onSave]);
+    clearPackSource();
+  }, [parsedPack, derivedData, loadGameData, clearPackSource]);
 
   const maybeSkeleton = derivedData ? "" : Classes.SKELETON;
 
@@ -180,9 +239,9 @@ function ConfirmPackDialog({ droppedFolder, onClose, onSave }: DialogProps) {
 
   return (
     <Dialog
-      isOpen={!!droppedFolder}
+      isOpen={!!packSource}
       title="Local Data Import"
-      onClose={onClose}
+      onClose={clearPackSource}
     >
       <div style={{ padding: "10px" }}>{body}</div>
       <DialogFooter
@@ -197,7 +256,7 @@ function ConfirmPackDialog({ droppedFolder, onClose, onSave }: DialogProps) {
             >
               Import
             </Button>
-            <Button onClick={onClose}>Cancel</Button>
+            <Button onClick={clearPackSource}>Cancel</Button>
           </>
         }
       />
diff --git a/src/header.tsx b/src/header.tsx
index 290758428..2225d0064 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -7,7 +7,15 @@ import {
   Navbar,
   Popover,
 } from "@blueprintjs/core";
-import { Trash, InfoSign, Menu as MenuIcon, Help } from "@blueprintjs/icons";
+import {
+  Trash,
+  InfoSign,
+  Menu as MenuIcon,
+  Help,
+  Database,
+  Import,
+  FolderOpen,
+} from "@blueprintjs/icons";
 import { useState } from "react";
 import { About } from "./about";
 import { HeaderControls } from "./controls";
@@ -16,11 +24,14 @@ import { LastUpdate } from "./last-update";
 import { ThemeToggle } from "./theme-toggle";
 import { DataLoadingSpinner, VersionSelect } from "./version-select";
 import { useDrawState } from "./draw-state";
+import { useImportUi } from "./state/import-ui";
 
 export function Header() {
   const [aboutOpen, setAboutOpen] = useState(false);
   const clearDrawings = useDrawState((d) => d.clearDrawings);
   const haveDrawings = useDrawState((d) => !!d.drawings.length);
+  const openItgInstructions = useImportUi((s) => s.openItgInstructions);
+  const openSmxEdits = useImportUi((s) => s.openSmxEdits);
   const { t } = useIntl();
 
   const menu = (
@@ -31,6 +42,21 @@ export function Header() {
         text={t("clearDrawings")}
         disabled={!haveDrawings}
       />
+      <MenuItem
+        icon={<Database />}
+        text={t("dataImport.title", undefined, "Data Import")}
+      >
+        <MenuItem
+          icon={<Import />}
+          onClick={openSmxEdits}
+          text={t("dataImport.smxEdits", undefined, "StepManiaX edits…")}
+        />
+        <MenuItem
+          icon={<FolderOpen />}
+          onClick={openItgInstructions}
+          text={t("dataImport.itgPack", undefined, "ITG / StepMania pack…")}
+        />
+      </MenuItem>
       <MenuItem
         icon={<InfoSign />}
         onClick={() => setAboutOpen(true)}
diff --git a/src/models/SongData.ts b/src/models/SongData.ts
index 6db8f5def..c019fc3b0 100644
--- a/src/models/SongData.ts
+++ b/src/models/SongData.ts
@@ -149,7 +149,6 @@ export interface Chart {
   drawGroup?: number;
   maxScore?: number;
   jacket?: string;
-  author?: string;
   /**
    * per-chart BPM range, if one applies
    */
diff --git a/src/smx-edit-import.tsx b/src/smx-edit-import.tsx
new file mode 100644
index 000000000..c669685bf
--- /dev/null
+++ b/src/smx-edit-import.tsx
@@ -0,0 +1,187 @@
+import {
+  Button,
+  Callout,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Text,
+} from "@blueprintjs/core";
+import { Import } from "@blueprintjs/icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useDrawState } from "./draw-state";
+import { useIntl } from "./hooks/useIntl";
+import { useImportUi } from "./state/import-ui";
+import type { GameData } from "./models/SongData";
+import {
+  buildEditDataFile,
+  fetchEditCharts,
+  parseEditCodes,
+  type BuildResult,
+  type FetchEditsResult,
+} from "./utils/smx-edit-import";
+import { convertErrorToString } from "./utils/error-to-string";
+import { toaster } from "./toaster";
+
+function loadBaseSmxData(): Promise<GameData> {
+  return import(/* webpackChunkName: "songData" */ "./songs/smx.json").then(
+    (mod) => mod.default as GameData,
+  );
+}
+
+const defaultName = "SMX with Edits!";
+
+/**
+ * Owns only the open/closed state of the dialog. The form (and all its state) is
+ * a child that mounts when opened and unmounts when closed, so its state resets
+ * implicitly on close — no manual reset logic.
+ */
+export function SmxEditImport() {
+  const isOpen = useImportUi((s) => s.smxEditsOpen);
+  const onClose = useImportUi((s) => s.closeSmxEdits);
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title="Import StepManiaX Edits"
+      icon={<Import />}
+      onClose={onClose}
+    >
+      {isOpen && <EditImportForm onClose={onClose} />}
+    </Dialog>
+  );
+}
+
+function EditImportForm({ onClose }: { onClose: (this: void) => void }) {
+  const { t } = useIntl();
+  const addImportedData = useDrawState((s) => s.addImportedData);
+
+  const [text, setText] = useState("");
+  const [name, setName] = useState(defaultName);
+  const [saving, setSaving] = useState(false);
+  const [fetching, setFetching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fetched, setFetched] = useState<FetchEditsResult | null>(null);
+
+  const codes = useMemo(() => parseEditCodes(text), [text]);
+  // stable primitive so the validation effect only re-runs when the set of
+  // codes actually changes, not on every keystroke
+  const codesKey = codes.join(",");
+
+  // Validate against the API automatically (debounced) as the user pastes/edits,
+  // so the import button is gated on a completed lookup.
+  useEffect(() => {
+    if (!codesKey) {
+      setFetched(null);
+      setFetching(false);
+      setError(null);
+      return;
+    }
+    let ignore = false;
+    setFetching(true);
+    setError(null);
+    const handle = setTimeout(() => {
+      fetchEditCharts(codesKey.split(","))
+        .then((res) => {
+          if (!ignore) setFetched(res);
+        })
+        .catch((e) => {
+          if (ignore) return;
+          console.error(e);
+          setError(convertErrorToString(e));
+          setFetched(null);
+        })
+        .finally(() => {
+          if (!ignore) setFetching(false);
+        });
+    }, 500);
+    return () => {
+      ignore = true;
+      clearTimeout(handle);
+    };
+  }, [codesKey]);
+
+  const handleImport = useCallback(async () => {
+    if (!fetched) {
+      return;
+    }
+    setError(null);
+    setSaving(true);
+    try {
+      const base = await loadBaseSmxData();
+      const result: BuildResult = buildEditDataFile(
+        base,
+        fetched.charts,
+        name.trim() || defaultName,
+      );
+      addImportedData(result.data.i18n.en.name as string, result.data);
+      const skipped = result.unknownSongs.length
+        ? t("smxImport.skipped", { count: result.unknownSongs.length })
+        : "";
+      toaster?.show({
+        intent: result.unknownSongs.length ? "warning" : "success",
+        message: t("smxImport.imported", { count: result.matched }) + skipped,
+      });
+      onClose();
+    } catch (e) {
+      console.error(e);
+      setError(convertErrorToString(e));
+    } finally {
+      setSaving(false);
+    }
+  }, [fetched, name, addImportedData, onClose, t]);
+
+  return (
+    <>
+      <DialogBody>
+        <FormGroup
+          label="Data set name"
+          helperText="Shown in the game picker as Imported data."
+        >
+          <InputGroup value={name} onChange={(e) => setName(e.target.value)} />
+        </FormGroup>
+        <FormGroup label="Paste edit links or codes">
+          <TextArea
+            fill
+            style={{ height: "10em" }}
+            value={text}
+            placeholder={"Z8Z-W77\nhttps://edits.stepmaniax.com/W15-W2P"}
+            onChange={(e) => setText(e.target.value)}
+          />
+        </FormGroup>
+        <Text tagName="p">
+          {t("smxImport.detected", { count: codes.length })}.{" "}
+          {fetching
+            ? t("smxImport.lookingUp")
+            : fetched
+              ? t("smxImport.found", { count: fetched.charts.length })
+              : null}
+        </Text>
+        {error && (
+          <Callout intent="danger" title="Something went wrong">
+            <code style={{ whiteSpace: "pre-wrap" }}>{error}</code>
+          </Callout>
+        )}
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <>
+            <Button
+              intent="primary"
+              icon={<Import />}
+              onClick={handleImport}
+              loading={saving}
+              disabled={fetching || !fetched?.charts.length}
+            >
+              {t("smxImport.importButton", {
+                count: fetched?.charts.length ?? 0,
+              })}
+            </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </>
+        }
+      />
+    </>
+  );
+}
diff --git a/src/song-card/icon-menu.tsx b/src/song-card/icon-menu.tsx
index 5594a531e..9f87f4ce9 100644
--- a/src/song-card/icon-menu.tsx
+++ b/src/song-card/icon-menu.tsx
@@ -12,6 +12,17 @@ import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
 import { useDrawing } from "../drawing-context";
 import { JSX } from "react";
 
+/** A game-specific info action contributed by a card variant. */
+export interface MenuInfoAction {
+  key: string;
+  /** i18n key for the menu item's label */
+  labelKey: string;
+  /** fallback label text if `labelKey` isn't found in the active translations */
+  labelDefault?: string;
+  icon?: JSX.Element;
+  onClick: () => void;
+}
+
 interface Props {
   onStartPocketPick?: (p: number) => void;
   onVeto?: (p: number) => void;
@@ -19,6 +30,7 @@ interface Props {
   onRedraw?: () => void;
   onSetWinner?: (p: number | null) => void;
   onCopy?: () => void;
+  infoActions?: MenuInfoAction[];
 }
 
 export function IconMenu(props: Props) {
@@ -29,6 +41,7 @@ export function IconMenu(props: Props) {
     onRedraw,
     onSetWinner,
     onCopy,
+    infoActions,
   } = props;
 
   const { t } = useIntl();
@@ -70,6 +83,16 @@ export function IconMenu(props: Props) {
           onClick={onCopy}
         />
       )}
+      {infoActions?.map((action) => (
+        <MenuItem
+          key={action.key}
+          text={t(action.labelKey, undefined, action.labelDefault)}
+          icon={action.icon}
+          onClick={action.onClick}
+          // keep the popover open so it can swap to the action's content in place
+          shouldDismissPopover={false}
+        />
+      ))}
       {onRedraw && (
         <>
           <MenuDivider />
diff --git a/src/song-card/song-card.tsx b/src/song-card/song-card.tsx
index 374bb8a28..f18cf8a75 100644
--- a/src/song-card/song-card.tsx
+++ b/src/song-card/song-card.tsx
@@ -78,6 +78,7 @@ export function SongCardBase(props: Props) {
     actionsEnabled,
     CenterContent,
     FooterContent,
+    getActions,
   } = props;
   const hideVetos = useConfigState((s) => s.hideVetos);
 
@@ -85,6 +86,9 @@ export function SongCardBase(props: Props) {
   const showMenu = () => setContextMenuOpen(true);
   const hideMenu = () => setContextMenuOpen(false);
 
+  // key of the variant-supplied action whose popover is currently shown, if any
+  const [openActionKey, setOpenActionKey] = useState<string | null>(null);
+
   const [pocketPickPendingForPlayer, setPocketPickPendingForPlayer] =
     useState<number>(0);
 
@@ -95,6 +99,23 @@ export function SongCardBase(props: Props) {
 
   const hasLabel = !!(vetoedBy || protectedBy || replacedBy);
 
+  // extra, game-specific info popovers contributed by the active card variant
+  const variantActions = getActions?.(replacedWith || chart) ?? [];
+  const openAction = variantActions.find((a) => a.key === openActionKey);
+  const infoActions = variantActions.length
+    ? variantActions.map((a) => ({
+        key: a.key,
+        labelKey: a.labelKey,
+        labelDefault: a.labelDefault,
+        icon: a.icon,
+        // hand off from the action menu to this action's popover on the same card
+        onClick: () => {
+          setContextMenuOpen(false);
+          setOpenActionKey(a.key);
+        },
+      }))
+    : undefined;
+
   let jacketBg = {};
   if (jacket) {
     const prefix = jacket.startsWith("blob:") ? "" : "jackets/";
@@ -130,14 +151,28 @@ export function SongCardBase(props: Props) {
           onRedraw={iconCallbacks.onRedraw}
           onSetWinner={iconCallbacks.onSetWinner}
           onCopy={handleCopy}
+          infoActions={infoActions}
         />
       );
     } else if (!vetoedBy) {
       menuContent = (
-        <IconMenu onSetWinner={iconCallbacks.onSetWinner} onCopy={handleCopy} />
+        <IconMenu
+          onSetWinner={iconCallbacks.onSetWinner}
+          onCopy={handleCopy}
+          infoActions={infoActions}
+        />
       );
     }
   }
+  // even without other actions, variant info actions are still worth offering
+  if (!menuContent && infoActions) {
+    menuContent = (
+      <IconMenu
+        infoActions={infoActions}
+        onCopy={canCopy ? handleCopy : undefined}
+      />
+    );
+  }
 
   const rootClassname = classNames(styles.chart, {
     [styles.vetoed]: vetoedBy,
@@ -187,7 +222,7 @@ export function SongCardBase(props: Props) {
     <div
       className={rootClassname}
       onClick={
-        showingContextMenu || pocketPickPendingForPlayer
+        showingContextMenu || openAction || pocketPickPendingForPlayer
           ? undefined
           : handleCardClick
       }
@@ -209,12 +244,15 @@ export function SongCardBase(props: Props) {
       </div>
 
       <Popover
-        content={menuContent}
-        isOpen={showingContextMenu}
-        onClose={hideMenu}
+        content={openAction ? openAction.content : menuContent}
+        isOpen={showingContextMenu || !!openAction}
+        onClose={() => {
+          hideMenu();
+          setOpenActionKey(null);
+        }}
         placement="top"
         modifiers={{
-          offset: { options: { offset: [0, 35] } },
+          offset: { options: { offset: [0, 15] } },
         }}
       >
         <FooterContent chart={replacedWith || chart} />
diff --git a/src/song-card/variants/base.tsx b/src/song-card/variants/base.tsx
index 08d42aa31..2f35191d5 100644
--- a/src/song-card/variants/base.tsx
+++ b/src/song-card/variants/base.tsx
@@ -17,6 +17,12 @@ const isJapanese = detectedLanguage === "ja";
 export interface CardContentsProps {
   CenterContent: React.ComponentType<CardSectionProps>;
   FooterContent: React.ComponentType<CardSectionProps>;
+  /**
+   * Optionally surface extra, game-specific info popovers for a given chart
+   * (e.g. a QR code for an SMX edit). The card renders each returned action as a
+   * menu item that, when chosen, shows its `content` in a popover on the card.
+   */
+  getActions?: (chart: CardSectionProps["chart"]) => CardAction[];
 }
 
 /** Props passed to child components that get to customize card center and footer content */
@@ -24,6 +30,23 @@ export interface CardSectionProps {
   chart: EligibleChart | DrawnChart | PlayerPickPlaceholder;
 }
 
+/**
+ * An extra, game-specific informational action a card variant can contribute to
+ * a card's menu. Selecting it opens `content` in a popover anchored to the card.
+ */
+export interface CardAction {
+  /** stable identifier, unique among a variant's actions for one chart */
+  key: string;
+  /** i18n key for the menu item's label (e.g. a `meta.*` key from the game data) */
+  labelKey: string;
+  /** fallback label text if `labelKey` isn't found in the active translations */
+  labelDefault?: string;
+  /** menu item icon */
+  icon?: React.JSX.Element;
+  /** content rendered in a popover anchored to the card when this action is chosen */
+  content: React.JSX.Element;
+}
+
 export function baseChartValues(
   chart: EligibleChart | DrawnChart | PlayerPickPlaceholder,
 ): Partial<EligibleChart> & { name: string } {
diff --git a/src/song-card/variants/index.ts b/src/song-card/variants/index.ts
index 61b4c26e8..b3fc006a6 100644
--- a/src/song-card/variants/index.ts
+++ b/src/song-card/variants/index.ts
@@ -1,4 +1,4 @@
-export type { CardSectionProps, CardContentsProps } from "./base";
+export type { CardSectionProps, CardContentsProps, CardAction } from "./base";
 export { baseChartValues } from "./base";
 
 import {
@@ -11,6 +11,7 @@ import { DdrCardFooter } from "./ddr";
 import { ItgCardFooter } from "./itg";
 import { MaimaiCardFooter } from "./maimai";
 import { DonkeyKongaCardCenter } from "./donkeykonga";
+import { SmxCardCenter, SmxCardFooter, getSmxCardActions } from "./smx";
 
 export function getContentVariants(
   cardType: string | undefined,
@@ -31,6 +32,12 @@ export function getContentVariants(
         CenterContent: BaseCardCenter,
         FooterContent: MaimaiCardFooter,
       };
+    case "smx":
+      return {
+        CenterContent: SmxCardCenter,
+        FooterContent: SmxCardFooter,
+        getActions: getSmxCardActions,
+      };
     case "donkeykonga":
       return {
         CenterContent: DonkeyKongaCardCenter,
diff --git a/src/song-card/variants/smx.css b/src/song-card/variants/smx.css
new file mode 100644
index 000000000..ce99ecafa
--- /dev/null
+++ b/src/song-card/variants/smx.css
@@ -0,0 +1,23 @@
+.editAuthor {
+  font-size: 115%;
+  font-style: italic;
+}
+
+.editQr {
+  padding: 12px;
+  max-width: 240px;
+  text-align: center;
+}
+.editQrCaption {
+  margin-top: 0;
+}
+.editQrCode {
+  background: #fff;
+  padding: 12px;
+  border-radius: 4px;
+}
+.editQrLink {
+  margin-bottom: 0;
+  margin-top: 12px;
+  word-break: break-all;
+}
diff --git a/src/song-card/variants/smx.tsx b/src/song-card/variants/smx.tsx
new file mode 100644
index 000000000..d61eca60b
--- /dev/null
+++ b/src/song-card/variants/smx.tsx
@@ -0,0 +1,110 @@
+import { Barcode, Edit } from "@blueprintjs/icons";
+import { JSX, useMemo } from "react";
+import { renderSVG } from "uqr";
+import { readExtra } from "../../utils/extras";
+import { copyTextToClipboard } from "../../utils/share";
+import { EDIT_AUTHOR_KEY, EDIT_ID_KEY } from "../../utils/smx-edit-import";
+import {
+  BaseCardCenter,
+  BaseCardFooter,
+  CardAction,
+  CardSectionProps,
+  baseChartValues,
+} from "./base";
+import styles from "./smx.css";
+
+/**
+ * Like the base card center, but adds the edit chart's author on a line below
+ * the song artist when present.
+ */
+export function SmxCardCenter(props: CardSectionProps) {
+  const { extras, name } = baseChartValues(props.chart);
+  const author = readExtra(extras, EDIT_AUTHOR_KEY);
+  let boss: JSX.Element | null = null;
+  if (name === "Big Boss") {
+    boss = (
+      <>
+        <div style={{ fontSize: "300%" }}>{name}</div>
+      </>
+    );
+  }
+  return (
+    <>
+      {boss || <BaseCardCenter chart={props.chart} />}
+      {author && (
+        <div className={styles.editAuthor}>
+          <Edit size={20} />
+          {author}
+        </div>
+      )}
+    </>
+  );
+}
+
+export function SmxCardFooter(props: CardSectionProps) {
+  const editId = readExtra(baseChartValues(props.chart).extras, EDIT_ID_KEY);
+  return (
+    <BaseCardFooter
+      chart={props.chart}
+      centerElement={editId && <div>{editId}</div>}
+    />
+  );
+}
+
+/**
+ * For edit charts, offer a QR code linking to the edit's share page so players
+ * can open and bookmark it in-game.
+ */
+export function getSmxCardActions(
+  chart: CardSectionProps["chart"],
+): CardAction[] {
+  const editId = readExtra(baseChartValues(chart).extras, EDIT_ID_KEY);
+  if (!editId) {
+    return [];
+  }
+  return [
+    {
+      key: "edit-qr",
+      labelKey: "meta.bookmarkEdit",
+      labelDefault: "QR code bookmark link",
+      icon: <Barcode />,
+      content: <EditQrContent editId={editId} />,
+    },
+  ];
+}
+
+/** Base url that an edit share code resolves to in-game. */
+const EDIT_BASE_URL = "https://edits.stepmaniax.com/";
+
+/**
+ * Popover body showing a QR code for an edit's share link, anchored to the
+ * card it came from so it's clear which chart is being shared.
+ */
+function EditQrContent({ editId }: { editId: string }) {
+  const url = EDIT_BASE_URL + editId;
+  const svg = useMemo(() => renderSVG(url), [url]);
+
+  return (
+    <div className={styles.editQr}>
+      <p className={styles.editQrCaption}>Scan to preview & bookmark:</p>
+      <div
+        className={styles.editQrCode}
+        // uqr returns a self-contained, trusted SVG string
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+      <p className={styles.editQrLink}>
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          onClick={(e) => {
+            e.preventDefault();
+            void copyTextToClipboard(url, "Copied edit link");
+          }}
+        >
+          edits.stepmaniax.com/{editId}
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/src/state/import-ui.ts b/src/state/import-ui.ts
new file mode 100644
index 000000000..dccfbe73f
--- /dev/null
+++ b/src/state/import-ui.ts
@@ -0,0 +1,47 @@
+import { create } from "zustand";
+
+/**
+ * Shared UI state for the data-import flows. The trigger (the top-left "Data
+ * Import" menu in the header) and the dialogs themselves (hosted alongside
+ * `DropHandler`) live in different parts of the tree, so this small store wires
+ * them together.
+ */
+interface ImportUiState {
+  /**
+   * Source of an ITG pack to parse, set either by a body drop or the manual
+   * folder picker. Drives the ITG confirm/import dialog.
+   */
+  packSource: DataTransferItem | HTMLInputElement | null;
+  itgInstructionsOpen: boolean;
+  smxEditsOpen: boolean;
+  setPackSource(this: void, source: DataTransferItem | HTMLInputElement): void;
+  clearPackSource(this: void): void;
+  openItgInstructions(this: void): void;
+  closeItgInstructions(this: void): void;
+  openSmxEdits(this: void): void;
+  closeSmxEdits(this: void): void;
+}
+
+export const useImportUi = create<ImportUiState>((set) => ({
+  packSource: null,
+  itgInstructionsOpen: false,
+  smxEditsOpen: false,
+  setPackSource(source) {
+    set({ packSource: source, itgInstructionsOpen: false });
+  },
+  clearPackSource() {
+    set({ packSource: null });
+  },
+  openItgInstructions() {
+    set({ itgInstructionsOpen: true });
+  },
+  closeItgInstructions() {
+    set({ itgInstructionsOpen: false });
+  },
+  openSmxEdits() {
+    set({ smxEditsOpen: true });
+  },
+  closeSmxEdits() {
+    set({ smxEditsOpen: false });
+  },
+}));
diff --git a/src/utils/extras.ts b/src/utils/extras.ts
new file mode 100644
index 000000000..1e76e3484
--- /dev/null
+++ b/src/utils/extras.ts
@@ -0,0 +1,20 @@
+/**
+ * Helpers for the generic `extras` array carried on songs and charts. `extras`
+ * is the game-agnostic channel for cosmetic, game-specific data: rather than
+ * adding bespoke fields to the schema (which is meant to stay game-agnostic), a
+ * card variant stashes its data here under a `${key}:` prefix and reads it back
+ * out in its own variant-specific code.
+ */
+
+/**
+ * Read the value of a `${key}:`-prefixed entry out of an `extras` array, or
+ * undefined if no such entry is present. Returns the first match.
+ */
+export function readExtra(
+  extras: string[] | undefined,
+  key: string,
+): string | undefined {
+  const prefix = `${key}:`;
+  const found = extras?.find((entry) => entry.startsWith(prefix));
+  return found?.slice(prefix.length);
+}
diff --git a/src/utils/smx-edit-import.ts b/src/utils/smx-edit-import.ts
new file mode 100644
index 000000000..797805bc2
--- /dev/null
+++ b/src/utils/smx-edit-import.ts
@@ -0,0 +1,155 @@
+import { Chart, GameData } from "../models/SongData";
+
+/**
+ * Imports StepManiaX edit charts (shared via urls like
+ * https://edits.stepmaniax.com/Z8Z-W77) and grafts them onto a clone of the
+ * stock SMX data so tournament organizers can draw from a curated set of edits
+ * alongside the official catalog.
+ *
+ * Edit metadata is sourced from the community API at api.smx.573.no, which
+ * accepts an array of `edit_display_id` values for batch lookup.
+ */
+
+const API_URL = "https://api.smx.573.no/charts";
+
+/**
+ * Keys under which SMX edit-chart metadata is stashed in a chart's generic
+ * `extras` array (as `${key}:value`). The SMX card variant reads these back out
+ * via `readExtra`; keeping them out of the schema avoids embedding a
+ * game-specific concept into the otherwise game-agnostic chart model.
+ */
+export const EDIT_ID_KEY = "editId";
+export const EDIT_AUTHOR_KEY = "editAuthor";
+/**
+ * How many edit codes to request per call. Capped at 100 for two reasons:
+ * the API returns at most 100 results per request (`_take`), and batching keeps
+ * the request URL short — 100 codes is a ~1.7KB url, well under any server/proxy
+ * length limit, so an arbitrarily long paste stays safe. Don't raise this past
+ * 100 without revisiting both constraints.
+ */
+const MAX_BATCH = 100;
+
+/** shape of the chart objects returned by the smx.573.no charts endpoint */
+interface ApiEditChart {
+  edit_display_id: string;
+  edit_author: string | null;
+  edit_style: string;
+  difficulty: number;
+  meter: number;
+  song_id: number;
+}
+
+export interface FetchEditsResult {
+  charts: ApiEditChart[];
+  /** codes that were requested but had no matching published edit */
+  notFound: string[];
+}
+
+export interface BuildResult {
+  data: GameData;
+  /** number of edit charts successfully grafted onto a song */
+  matched: number;
+  /** edit codes whose song isn't present in the stock SMX data */
+  unknownSongs: string[];
+}
+
+/**
+ * Scrape edit codes out of arbitrary pasted text (full urls, bare codes, or any
+ * mix of comma/space/newline separated values). Codes look like `Z8Z-W77`.
+ */
+export function parseEditCodes(text: string): string[] {
+  const matches = text.toUpperCase().match(/[A-Z0-9]{3}-[A-Z0-9]{3}/g) || [];
+  return Array.from(new Set(matches));
+}
+
+function chunk<T>(items: T[], size: number): T[][] {
+  const out: T[][] = [];
+  for (let i = 0; i < items.length; i += size) {
+    out.push(items.slice(i, i + size));
+  }
+  return out;
+}
+
+/** Look up edit chart metadata for a list of edit codes, batching as needed. */
+export async function fetchEditCharts(
+  codes: string[],
+): Promise<FetchEditsResult> {
+  const charts: ApiEditChart[] = [];
+  for (const batch of chunk(codes, MAX_BATCH)) {
+    const q = JSON.stringify({
+      edit_display_id: batch,
+      _take: MAX_BATCH,
+    });
+    const res = await fetch(`${API_URL}?q=${encodeURIComponent(q)}`, {
+      signal: AbortSignal.timeout(30000),
+    });
+    if (!res.ok) {
+      throw new Error(`SMX API request failed with status ${res.status}`);
+    }
+    const batchCharts: ApiEditChart[] = await res.json();
+    charts.push(...batchCharts);
+  }
+
+  const found = new Set(charts.map((c) => c.edit_display_id));
+  const notFound = codes.filter((code) => !found.has(code));
+  return { charts, notFound };
+}
+
+/**
+ * Clone the stock SMX data and graft the given edit charts onto their matching
+ * songs (matched by `saIndex` === the API's `song_id`). Returns the new data
+ * file plus a report of what couldn't be matched.
+ */
+export function buildEditDataFile(
+  base: GameData,
+  charts: ApiEditChart[],
+  name: string,
+): BuildResult {
+  const data: GameData = structuredClone(base);
+  data.i18n.en.name = name;
+  data.meta.cardVariant = "smx";
+
+  // register the "edit" difficulty class (absent from stock SMX data)
+  if (!data.meta.difficulties.some((d) => d.key === "edit")) {
+    data.meta.difficulties.push({ key: "edit", color: "#7b7b7b" });
+  }
+  // select edits by default, since that's the point of this data set
+  if (!data.defaults.difficulties.includes("edit")) {
+    data.defaults.difficulties.push("edit");
+  }
+  const en = data.i18n.en as Record<string, unknown>;
+  en.edit = "Edit";
+  const abbr = (en.$abbr || (en.$abbr = {})) as Record<string, unknown>;
+  abbr.edit = "Edit";
+  // label for the per-card "bookmark this edit" action (see the smx card variant).
+  // a partial `ja` dict is fine: other keys fall back to `en` in the provider.
+  en.bookmarkEdit = "QR code bookmark link";
+  const ja = (data.i18n.ja || (data.i18n.ja = {})) as Record<string, unknown>;
+  ja.bookmarkEdit = "QRコードのブックマークリンク";
+
+  const songsByIndex = new Map(data.songs.map((s) => [s.saIndex, s]));
+
+  let matched = 0;
+  const unknownSongs: string[] = [];
+  for (const chart of charts) {
+    const song = songsByIndex.get(String(chart.song_id));
+    if (!song) {
+      unknownSongs.push(chart.edit_display_id);
+      continue;
+    }
+    const extras = [`${EDIT_ID_KEY}:${chart.edit_display_id}`];
+    if (chart.edit_author) {
+      extras.push(`${EDIT_AUTHOR_KEY}:${chart.edit_author}`);
+    }
+    const newChart: Chart = {
+      style: chart.edit_style === "team" ? "team" : "solo",
+      diffClass: "edit",
+      lvl: chart.meter ?? chart.difficulty,
+      extras,
+    };
+    song.charts.push(newChart);
+    matched++;
+  }
+
+  return { data, matched, unknownSongs };
+}
diff --git a/yarn.lock b/yarn.lock
index f064d6ff1..a7b19a2f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4749,6 +4749,7 @@ __metadata:
     style-loader: "npm:4.0.0"
     tasuku: "npm:^2.0.4"
     typescript: "npm:5.9.3"
+    uqr: "npm:^0.1.3"
     victory: "npm:37.3.6"
     webpack: "npm:5.104.1"
     webpack-cli: "npm:6.0.1"
@@ -9422,6 +9423,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uqr@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "uqr@npm:0.1.3"
+  checksum: 10/cde1dd270e3d39fc1870375d33a88c1ec7ac430c6e1b0b28943ad08b029dc9409076aa2213ebf2eb209cfa37abccca365d85f2cd3b1cdefbcfb68ab8c18857d3
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"