@learnpack/learnpack 5.0.358 → 5.0.360

package/lib/commands/publish.d.ts

@@ -1,14 +1,4 @@
 import SessionCommand from "../utils/SessionCommand";
-type ExistingAssetInfo = {
-    lang: string;
-    slug: string;
-    exists: boolean;
-    academyId?: number;
-};
-export declare const handleAssetCreation: (sessionPayload: {
-    token: string;
-    rigobotToken: string;
-}, learnJson: any, selectedLang: string, learnpackDeployUrl: string, b64IndexReadme: string, academyId: number | undefined, learnpackId: number, preflightInfo?: ExistingAssetInfo, all_translations?: string[]) => Promise<any>;
 declare class BuildCommand extends SessionCommand {
     static description: string;
     static flags: {

package/lib/commands/publish.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleAssetCreation = void 0;
 /* eslint-disable arrow-parens */
 /* eslint-disable unicorn/no-array-for-each */
 const child_process_1 = require("child_process");
@@ -20,181 +19,55 @@ const rigoActions_1 = require("../utils/rigoActions");
 const misc_1 = require("../utils/misc");
 const creatorUtilities_1 = require("../utils/creatorUtilities");
 const branding_1 = require("../utils/branding");
+const assetResolver_1 = require("../utils/assetResolver");
+const assetSync_1 = require("../utils/assetSync");
 const uploadZipEndpont = api_1.RIGOBOT_HOST + "/v1/learnpack/upload";
-const getAvailableLangs = (learnJson) => {
-    const langs = Object.keys((learnJson === null || learnJson === void 0 ? void 0 : learnJson.title) || {});
-    return langs.filter((l) => typeof l === "string" && l.length > 0);
-};
 const getDefaultLang = (learnJson) => {
-    const availableLangs = getAvailableLangs(learnJson);
+    const availableLangs = (0, assetResolver_1.getAvailableLangs)(learnJson);
     if (availableLangs.length === 0)
         return "en";
     return availableLangs.includes("en") ? "en" : availableLangs[0];
 };
-const getLocalizedValue = (translations, lang, fallbackLangs = ["en", "us"]) => {
-    if (!translations || typeof translations !== "object")
-        return "";
-    const direct = translations[lang];
-    if (typeof direct === "string" && direct.trim().length > 0)
-        return direct;
-    for (const fb of fallbackLangs) {
-        const v = translations[fb];
-        if (typeof v === "string" && v.trim().length > 0)
-            return v;
-    }
-    const firstKey = Object.keys(translations)[0];
-    const first = firstKey ? translations[firstKey] : "";
-    return typeof first === "string" ? first : "";
-};
-const getExistingAssetsInfo = async (token, learnJson) => {
-    const availableLangs = getAvailableLangs(learnJson);
-    const results = [];
-    for (const lang of availableLangs) {
-        const assetTitle = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, lang);
-        if (!assetTitle)
-            continue;
-        let slug = (0, creatorUtilities_1.slugify)(assetTitle).slice(0, 47);
-        slug = `${slug}-${lang}`;
-        // eslint-disable-next-line no-await-in-loop
-        const { exists, academyId } = await api_1.default.doesAssetExists(token, slug);
-        results.push({ lang, slug, exists, academyId });
-    }
-    return results;
-};
-const determinePublishAcademyMode = (existingAssets) => {
-    const academyIds = existingAssets
-        .filter((a) => a.exists && a.academyId !== undefined)
-        .map((a) => a.academyId);
-    const unique = [...new Set(academyIds)];
-    if (unique.length === 0)
-        return { type: "select" };
-    if (unique.length === 1)
-        return { type: "locked", academyId: unique[0] };
-    return { type: "conflict", academies: unique };
-};
-const handleAssetCreation = async (sessionPayload, learnJson, selectedLang, learnpackDeployUrl, b64IndexReadme, academyId, learnpackId, preflightInfo, all_translations = []) => {
-    const category = "uncategorized";
+const readReadmeFromDisk = async (lang) => {
+    const readmePath = path.join(process.cwd(), `README${(0, creatorUtilities_1.getReadmeExtension)(lang)}`);
     try {
-        const user = await api_1.default.validateToken(sessionPayload.token);
-        const assetTitle = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, selectedLang);
-        const assetDescription = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.description, selectedLang);
-        if (!assetTitle) {
-            throw new Error(`Missing learn.json title for language "${selectedLang}"`);
-        }
-        let slug = (0, creatorUtilities_1.slugify)(assetTitle).slice(0, 47);
-        slug = `${slug}-${selectedLang}`;
-        // Use pre-flight info when available to avoid an extra GET request
-        const { exists, academyId: existingAcademyId } = preflightInfo !== null && preflightInfo !== void 0 ? preflightInfo : (await api_1.default.doesAssetExists(sessionPayload.token, slug));
-        // const technologies: unknown[] = Array.isArray(learnJson?.technologies) ?
-        //   learnJson.technologies :
-        //   []
-        if (!exists) {
-            console_1.default.info("Asset does not exist in this academy, creating it");
-            const assetPayload = {
-                slug: slug,
-                title: assetTitle,
-                lang: selectedLang,
-                graded: true,
-                description: assetDescription,
-                learnpack_deploy_url: learnpackDeployUrl,
-                // technologies: technologies.map((tech: unknown) =>
-                //   String(tech).toLowerCase().replace(/\s+/g, "-")
-                // ),
-                technologies: [],
-                url: learnpackDeployUrl,
-                category: category,
-                owner: user.id,
-                author: user.id,
-                preview: learnJson.preview,
-                readme_raw: b64IndexReadme,
-                all_translations,
-                learnpack_id: learnpackId,
-            };
-            if (academyId !== undefined) {
-                assetPayload.academy_id = academyId;
-            }
-            const asset = await api_1.default.createAsset(sessionPayload.token, assetPayload);
-            try {
-                await api_1.default.updateRigoPackage(sessionPayload.rigobotToken.trim(), learnJson.slug, {
-                    asset_id: asset.id,
-                });
-            }
-            catch (error) {
-                console_1.default.error("Error updating Rigo package:", error);
-            }
-            console_1.default.info("Asset created with id", asset.id);
-            return asset;
-        }
-        console_1.default.info("Asset exists, updating it");
-        const updatePayload = {
-            graded: true,
-            learnpack_deploy_url: learnpackDeployUrl,
-            title: assetTitle,
-            category: category,
-            description: assetDescription,
-            all_translations,
-            learnpack_id: learnpackId,
-        };
-        // Only set academy when the asset has none yet and the user selected one
-        if (existingAcademyId === undefined && academyId !== undefined) {
-            updatePayload.academy_id = academyId;
-        }
-        const asset = await api_1.default.updateAsset(sessionPayload.token, slug, updatePayload);
-        try {
-            await api_1.default.updateRigoPackage(sessionPayload.rigobotToken.trim(), learnJson.slug, {
-                asset_id: asset.id,
-            });
-        }
-        catch (error) {
-            console_1.default.error("Error updating Rigo package:", error);
-        }
-        console_1.default.info("Asset updated with id", asset.id);
-        return asset;
+        return fs.existsSync(readmePath) ?
+            fs.readFileSync(readmePath, "utf-8") :
+            "";
     }
     catch (error) {
-        console_1.default.error("Error updating or creating asset:", error);
-        throw error;
+        console_1.default.error("Error reading index readme:", error);
+        return "";
     }
 };
-exports.handleAssetCreation = handleAssetCreation;
-const createMultiLangAssetFromDisk = async (sessionPayload, learnJson, deployUrl, selectedAcademyId, existingAssetsInfo = []) => {
-    const availableLangs = getAvailableLangs(learnJson);
-    if (availableLangs.length === 0) {
+const syncAssetsFromDisk = async (sessionPayload, learnJson, deployUrl, selectedAcademyId, resolution) => {
+    if ((0, assetResolver_1.getAvailableLangs)(learnJson).length === 0) {
         console_1.default.error("No languages found in learn.json.title. Add at least one language (e.g. title.en).");
         return;
     }
-    const learnpackId = await api_1.default.resolveLearnpackPackageId(sessionPayload.rigobotToken, learnJson.slug);
-    if (learnpackId === null) {
-        console_1.default.warning("Breathecode assets skipped: could not resolve Learnpack package id");
-        return;
+    // The pre-upload resolution is reused unless the package did not exist in
+    // Rigobot yet (first publish): the upload has just created it.
+    const result = await (0, assetSync_1.syncPackageAssets)({
+        bcToken: sessionPayload.token,
+        rigoToken: sessionPayload.rigobotToken,
+        packageSlug: learnJson.slug,
+        learnJson,
+        deployUrl,
+        academyId: selectedAcademyId,
+        readReadme: readReadmeFromDisk,
+        resolution: resolution.learnpackId === null ? undefined : resolution,
+    });
+    for (const warning of result.warnings)
+        console_1.default.warning(warning);
+    for (const synced of result.synced) {
+        console_1.default.info(`Asset ${synced.action} for "${synced.lang}": #${synced.asset.id} ${synced.asset.slug}`);
     }
-    const all_translations = [];
-    for (const lang of availableLangs) {
-        const readmePath = path.join(process.cwd(), `README${(0, creatorUtilities_1.getReadmeExtension)(lang)}`);
-        let indexReadmeString = "";
-        try {
-            if (fs.existsSync(readmePath)) {
-                indexReadmeString = fs.readFileSync(readmePath, "utf-8");
-            }
+    for (const error of result.errors) {
+        if (error.kind === "lang_error") {
+            console_1.default.error(`Asset for "${error.lang}": ${error.error.detail}`);
         }
-        catch (error) {
-            console_1.default.error("Error reading index readme:", error);
-            indexReadmeString = "";
-        }
-        const b64IndexReadme = Buffer.from(indexReadmeString).toString("base64");
-        const preflightInfo = existingAssetsInfo.find((a) => a.lang === lang);
-        try {
-            // eslint-disable-next-line no-await-in-loop
-            const asset = await (0, exports.handleAssetCreation)(sessionPayload, learnJson, lang, deployUrl, b64IndexReadme, selectedAcademyId, learnpackId, preflightInfo, all_translations);
-            if (!asset) {
-                console_1.default.debug("Could not create/update asset for lang", lang);
-                continue;
-            }
-            all_translations.push(asset.slug);
-        }
-        catch (error) {
-            console_1.default.error("Error creating asset for language", lang, error);
-            // Continue with other languages
+        else {
+            console_1.default.error(error.error.detail);
         }
     }
 };
@@ -313,8 +186,19 @@ class BuildCommand extends SessionCommand_1.default {
             process.exit(1);
         }
         console_1.default.info("Checking existing assets...");
-        const existingAssetsInfo = await getExistingAssetsInfo(sessionPayload.token, learnJson);
-        const academyMode = determinePublishAcademyMode(existingAssetsInfo);
+        const resolution = await (0, assetResolver_1.resolvePackageAssets)({
+            bcToken: sessionPayload.token,
+            rigoToken: rigoToken,
+            packageSlug: learnJson.slug,
+            learnJson,
+        });
+        for (const warning of resolution.warnings)
+            console_1.default.warning(warning);
+        if (resolution.packageState === "unknown") {
+            console_1.default.error(`${resolution.packageError}. Existing assets cannot be checked, so publishing now could create duplicates. Try again later.`);
+            process.exit(1);
+        }
+        const academyMode = (0, assetResolver_1.determineAcademyMode)(resolution);
         let selectedAcademyId;
         if (academyMode.type === "conflict") {
             console_1.default.warning(`Some of your assets are associated with different academies ` +
@@ -380,9 +264,9 @@ class BuildCommand extends SessionCommand_1.default {
         if (fs.existsSync(indexHtmlPath)) {
             let indexHtmlContent = fs.readFileSync(indexHtmlPath, "utf-8");
             const selectedLang = getDefaultLang(learnJson);
-            const description = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.description, selectedLang) ||
+            const description = (0, assetSync_1.getLocalizedValue)(learnJson === null || learnJson === void 0 ? void 0 : learnJson.description, selectedLang) ||
                 "LearnPack is awesome!";
-            const title = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, selectedLang) ||
+            const title = (0, assetSync_1.getLocalizedValue)(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, selectedLang) ||
                 "LearnPack: Interactive Learning as a Service";
             const previewUrl = learnJson.preview || (0, branding_1.getFallbackPreviewUrl)();
             // Replace placeholders and the <title>Old title </title> tag for a new tag with the title
@@ -402,9 +286,9 @@ class BuildCommand extends SessionCommand_1.default {
         if (fs.existsSync(manifestPWA)) {
             let manifestPWAContent = fs.readFileSync(manifestPWA, "utf-8");
             const selectedLang = getDefaultLang(learnJson);
-            const courseTitle = getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, selectedLang) ||
-                getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, "us") ||
-                getLocalizedValue(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, "en") ||
+            const courseTitle = (0, assetSync_1.getLocalizedValue)(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, selectedLang) ||
+                (0, assetSync_1.getLocalizedValue)(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, "us") ||
+                (0, assetSync_1.getLocalizedValue)(learnJson === null || learnJson === void 0 ? void 0 : learnJson.title, "en") ||
                 "LearnPack";
             manifestPWAContent = manifestPWAContent.replace("{{course_title}}", courseTitle);
             const courseShortName = { answer: "testing-tutorial" };
@@ -461,7 +345,7 @@ class BuildCommand extends SessionCommand_1.default {
                 console.log(res.data);
                 fs.unlinkSync(zipFilePath);
                 this.removeDirectory(buildDir);
-                await createMultiLangAssetFromDisk({ token: sessionPayload.token, rigobotToken: rigoToken }, learnJson, res.data.url, selectedAcademyId, existingAssetsInfo);
+                await syncAssetsFromDisk({ token: sessionPayload.token, rigobotToken: rigoToken }, learnJson, res.data.url, selectedAcademyId, resolution);
             }
             catch (error) {
                 if (axios_1.default.isAxiosError(error)) {

package/lib/commands/serve.js

@@ -31,7 +31,8 @@ const misc_1 = require("../utils/misc");
 const configBuilder_1 = require("../utils/configBuilder");
 const creatorUtilities_2 = require("../utils/creatorUtilities");
 const sidebarGenerator_1 = require("../utils/sidebarGenerator");
-const publish_1 = require("./publish");
+const assetResolver_1 = require("../utils/assetResolver");
+const assetSync_1 = require("../utils/assetSync");
 const export_1 = require("../utils/export");
 const router_1 = require("../services/ingest/http/router");
 const bucketIo_1 = require("../utils/coursePackage/bucketIo");
@@ -319,94 +320,34 @@ const cleanFormState = (formState) => {
 const cleanFormStateForSyllabus = (formState) => {
     return Object.assign(Object.assign({}, formState), { description: formState.description, technologies: formState.technologies, contentIndex: formState.contentIndex, purposse: undefined, duration: undefined, hasContentIndex: undefined, variables: undefined, currentStep: undefined, language: undefined, isCompleted: undefined });
 };
-const getLocalizedValue = (translations, lang, fallbackLangs = ["en", "us"]) => {
-    if (!translations || typeof translations !== "object")
-        return "";
-    const direct = translations[lang];
-    if (typeof direct === "string" && direct.trim().length > 0)
-        return direct;
-    for (const fb of fallbackLangs) {
-        const v = translations[fb];
-        if (typeof v === "string" && v.trim().length > 0)
-            return v;
-    }
-    const firstKey = Object.keys(translations)[0];
-    const first = firstKey ? translations[firstKey] : "";
-    return typeof first === "string" ? first : "";
-};
-function assetSyncErrorDetail(err) {
-    if (typeof (err === null || err === void 0 ? void 0 : err.detail) === "string")
-        return err.detail;
-    if (typeof (err === null || err === void 0 ? void 0 : err.message) === "string")
-        return err.message;
-    try {
-        return JSON.stringify(err);
-    }
-    catch (_a) {
-        return String(err);
-    }
-}
 const createMultiLangAsset = async (bucket, rigoToken, bcToken, courseSlug, courseJson, deployUrl, academyId) => {
-    var _a;
-    const learnpackId = await (0, api_1.resolveLearnpackPackageId)(rigoToken, courseSlug);
-    if (learnpackId === null) {
-        return {
-            errors: [
-                {
-                    kind: "package_error",
-                    error: {
-                        detail: "Could not resolve Learnpack package id; assets not synced to Breathecode.",
-                    },
-                },
-            ],
-        };
-    }
-    const availableLangs = Object.keys(courseJson.title);
-    console.log("AVAILABLE LANGUAGES to upload asset", availableLangs);
-    const all_translations = [];
-    const errors = [];
-    for (const lang of availableLangs) {
-        // eslint-disable-next-line no-await-in-loop
-        const indexReadme = await bucket.file(`courses/${courseSlug}/README${(0, creatorUtilities_1.getReadmeExtension)(lang)}`);
-        let indexReadmeString = "";
+    const readReadme = async (lang) => {
+        const indexReadme = bucket.file(`courses/${courseSlug}/README${(0, creatorUtilities_1.getReadmeExtension)(lang)}`);
         try {
-            // eslint-disable-next-line no-await-in-loop
-            const [indexReadmeContent] = await indexReadme.download();
-            indexReadmeString = indexReadmeContent.toString();
+            const [content] = await indexReadme.download();
+            return content.toString();
         }
         catch (error) {
             console.error("Error downloading index readme", error);
             // TODO: Trigger generation of the index readme
-            indexReadmeString = "";
-        }
-        const b64IndexReadme = buffer_1.Buffer.from(indexReadmeString).toString("base64");
-        try {
-            // eslint-disable-next-line no-await-in-loop
-            const asset = await (0, publish_1.handleAssetCreation)({ token: bcToken, rigobotToken: rigoToken.trim() }, courseJson, lang, deployUrl, b64IndexReadme, academyId, learnpackId, undefined, all_translations);
-            if (!asset) {
-                errors.push({
-                    kind: "lang_error",
-                    lang,
-                    error: { detail: "Failed to create asset" },
-                });
-                console.log("No se pudo crear el asset, saltando idioma", lang);
-                continue;
-            }
-            all_translations.push(asset.slug);
-        }
-        catch (error) {
-            const errorData = error && typeof error === "object" && "response" in error ?
-                ((_a = error.response) === null || _a === void 0 ? void 0 : _a.data) || error :
-                error;
-            errors.push({
-                kind: "lang_error",
-                lang,
-                error: { detail: assetSyncErrorDetail(errorData) },
-            });
-            console.error(`Error creating asset for language ${lang}:`, error);
+            return "";
         }
+    };
+    const result = await (0, assetSync_1.syncPackageAssets)({
+        bcToken,
+        rigoToken,
+        packageSlug: courseSlug,
+        learnJson: courseJson,
+        deployUrl,
+        academyId,
+        readReadme,
+    });
+    for (const warning of result.warnings)
+        console.warn("[assets]", warning);
+    for (const synced of result.synced) {
+        console.log(`[assets] ${synced.action} "${synced.lang}": #${synced.asset.id} ${synced.asset.slug}`);
     }
-    return { errors };
+    return { errors: result.errors };
 };
 const lessonCleaner = (lesson) => {
     return Object.assign(Object.assign({}, lesson), { duration: undefined, generated: undefined, status: undefined, translations: undefined, uid: undefined, initialContent: undefined, locked: undefined });
@@ -3713,52 +3654,47 @@ class ServeCommand extends SessionCommand_1.default {
                         error: "Authentication failed, missing breathecode token",
                     });
                 }
+                // Older IDEs only send the Breathecode token; without the Rigobot
+                // token the lookup falls back to the title-derived slugs.
+                const rigoToken = req.header("x-rigo-token");
                 const configFile = await bucket.file(`courses/${slug}/.learn/config.json`);
                 const [configContent] = await configFile.download();
                 const configJson = JSON.parse(configContent.toString());
                 const { config } = configJson;
-                const availableLangs = Object.keys(config.title || {});
-                let isPublished = false;
-                // Collect academy ids from all existing assets
-                const foundAcademyIds = [];
-                const slugsToCheck = availableLangs
-                    .map(lang => {
-                    const assetTitle = getLocalizedValue(config.title, lang);
-                    if (!assetTitle)
-                        return null;
-                    const assetSlug = (0, creatorUtilities_2.slugify)(assetTitle).slice(0, 47);
-                    return `${assetSlug}-${lang}`;
-                })
-                    .filter((slug) => slug !== null);
-                const assetChecks = await Promise.all(slugsToCheck.map(slug => (0, api_1.doesAssetExists)(bcToken, slug)));
-                for (const { exists, academyId: existingAcademyId } of assetChecks) {
-                    if (exists) {
-                        isPublished = true;
-                        if (existingAcademyId !== undefined) {
-                            foundAcademyIds.push(existingAcademyId);
-                        }
+                const resolution = await (0, assetResolver_1.resolvePackageAssets)({
+                    bcToken,
+                    rigoToken,
+                    packageSlug: slug,
+                    learnJson: config,
+                });
+                for (const warning of resolution.warnings) {
+                    console.warn("[package-academy]", warning);
+                }
+                const isPublished = (0, assetResolver_1.hasPublishedAsset)(resolution);
+                const academyMode = (0, assetResolver_1.determineAcademyMode)(resolution);
+                const warnings = [...resolution.warnings];
+                if (resolution.packageState === "unknown") {
+                    warnings.push(`${resolution.packageError}; existing assets could not be checked.`);
+                }
+                for (const [lang, entry] of resolution.byLang) {
+                    if (entry.status === "unknown") {
+                        warnings.push(`"${lang}": ${entry.error}`);
+                    }
+                    else if (entry.status === "ambiguous") {
+                        warnings.push(`"${lang}": ${entry.candidates.length} assets found (${entry.candidates
+                            .map(c => `#${c.id} ${c.slug}`)
+                            .join(", ")})`);
                     }
                 }
-                const uniqueAcademies = [...new Set(foundAcademyIds)];
-                let mode;
-                let lockedAcademyId;
-                let conflictAcademies;
-                if (uniqueAcademies.length === 0) {
-                    mode = "select";
-                }
-                else if (uniqueAcademies.length === 1) {
-                    mode = "locked";
-                    lockedAcademyId = uniqueAcademies[0];
-                }
-                else {
-                    mode = "conflict";
-                    conflictAcademies = uniqueAcademies;
-                }
+                const mode = academyMode.type;
+                const lockedAcademyId = academyMode.type === "locked" ? academyMode.academyId : undefined;
+                const conflictAcademies = academyMode.type === "conflict" ? academyMode.academies : undefined;
                 return res.json({
                     isPublished,
                     mode,
                     lockedAcademyId,
                     conflictAcademies,
+                    warnings,
                 });
             }
             catch (error) {

package/lib/creatorDist/assets/{index-zrPponAn.css → index-B7s5Nmq8.css}

@@ -65,6 +65,7 @@
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -439,6 +440,12 @@
   .z-1000 {
     z-index: 1000;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .row-start-2 {
+    grid-row-start: 2;
+  }
   .container {
     width: 100%;
   }
@@ -536,6 +543,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -548,6 +558,9 @@
   .table {
     display: table;
   }
+  .field-sizing-content {
+    field-sizing: content;
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -644,6 +657,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-\[700px\] {
     max-width: 700px;
   }
@@ -705,6 +721,9 @@
   .list-disc {
     list-style-type: disc;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -780,6 +799,15 @@
       calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))
     );
   }
+  .justify-self-center {
+    justify-self: center;
+  }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+  .justify-self-start {
+    justify-self: flex-start;
+  }
   .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -905,6 +933,9 @@
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-transparent {
+    background-color: #0000;
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1046,6 +1077,9 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .whitespace-pre-line {
     white-space: pre-line;
   }
@@ -1244,6 +1278,19 @@
   .focus\:ring-blue-200:focus {
     --tw-ring-color: var(--color-blue-200);
   }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:ring-blue-300:focus-visible {
+    --tw-ring-color: var(--color-blue-300);
+  }
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -1257,9 +1304,21 @@
     opacity: 0.5;
   }
   @media (min-width: 40rem) {
+    .sm\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+    .sm\:col-start-2 {
+      grid-column-start: 2;
+    }
+    .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
     .sm\:w-auto {
       width: auto;
     }
+    .sm\:grid-cols-\[1fr_auto_1fr\] {
+      grid-template-columns: 1fr auto 1fr;
+    }
     .sm\:flex-row {
       flex-direction: row;
     }