[{"_1":2,"_172":-5,"_173":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","97b02a6e6a2fe2798b01621eff234d45cec6d311","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_149":150,"_168":169,"_170":171},"handle","dcm31","name","quest-abilities","path","client.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":111,"_112":-5,"_12":113,"_114":-5,"_115":20,"_116":-5,"_117":-5,"_118":32,"_14":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":129,"_132":133,"_135":136,"_148":20},"id","2c3fdf94-e81d-11f0-95d1-42dde27851f2","createdAt",["D",1767387244254],"deletedAt","legacyEnvVars","privacy","public","description","Quest RPG ability card viewer and printer","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","d663a026-6449-42f6-9156-1d4a2d64d38c","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_130":131},"profileImageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/260ec866-bb5d-4641-4bfe-526cca896a00/square512","org",{"_94":95,"_134":131,"_12":113},"avatar","branch",{"_137":138,"_96":44,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":97,"_147":95},"version",16,"2c4026b6-e81d-11f0-95d1-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":151,"_96":99,"_152":153,"_154":-5,"_155":139,"_156":157,"_158":159,"_104":160,"_137":161,"_162":149,"_163":164,"_165":20,"_166":-5,"_98":167},"c33588c2-e840-11f0-95d1-42dde27851f2","fileId","6390e970-e81d-11f0-88da-42dde27851f2","parentId","branchId","branchVersion",15,"latest",true,["D",1767402529902],9,"fileType","content","// Client-side React app code (runs in browser)\n\nexport function getClientScript(): string {\n return `\nconst { useState, useEffect, useMemo } = React;\n\nconst ROLES = ['doctor', 'fighter', 'invoker', 'magician', 'naturalist', 'ranger', 'spy', 'wizard'];\nconst STORAGE_KEY = 'quest-abilities-selections';\n\n// Role colors based on official Quest art\nconst ROLE_COLORS = {\n doctor: { bg: '#fcd5ce', border: '#f4978e', text: '#9d4343', activeBg: '#e86a6a' },\n fighter: { bg: '#fed7aa', border: '#fb923c', text: '#9a3412', activeBg: '#ea580c' },\n invoker: { bg: '#c7d2fe', border: '#818cf8', text: '#3730a3', activeBg: '#4f46e5' },\n magician: { bg: '#f5d0fe', border: '#e879f9', text: '#86198f', activeBg: '#c026d3' },\n naturalist: { bg: '#bbf7d0', border: '#4ade80', text: '#166534', activeBg: '#16a34a' },\n ranger: { bg: '#a5f3fc', border: '#22d3ee', text: '#0e7490', activeBg: '#0891b2' },\n spy: { bg: '#ddd6fe', border: '#a78bfa', text: '#5b21b6', activeBg: '#7c3aed' },\n wizard: { bg: '#fde68a', border: '#fbbf24', text: '#92400e', activeBg: '#d97706' },\n};\n\n// Path emojis - unique single emojis per path (no duplicates)\nconst PATH_EMOJIS = {\n // Doctor\n 'Healing': '💚',\n 'Alteration': '🧬',\n 'Necromancy': '☠️',\n 'Harm': '💉',\n 'Perception': '🔮',\n 'Examination': '🩺',\n // Fighter\n 'Dueling': '⚔️',\n 'Tactics': '📋',\n 'Camaraderie': '🫂',\n 'Leadership': '👑',\n 'Body': '💪',\n // Invoker\n 'Invocation': '🙏',\n 'Inquiries': '🔎',\n 'Verdicts': '⚖️',\n 'Wrath': '⚡',\n 'Wards': '🛡️',\n // Magician\n 'Misdirection': '🪞',\n 'Mannequins': '🎭',\n 'Clairvoyance': '👁️',\n 'Conjuration': '🎩',\n 'Mind Control': '🧠',\n 'Mayhem': '💥',\n // Naturalist\n 'Shapeshifter': '🦎',\n 'Summoner': '🌿',\n 'Elementalist': '🔥',\n 'Stormcaller': '⛈️',\n 'Spiritcaller': '🐺',\n 'Ecologist': '🌍',\n // Ranger\n 'Story and Song': '🎵',\n 'Survivalist': '🏕️',\n 'Pathfinder': '🧭',\n 'Hunter': '🏹',\n 'Friend': '🦅',\n // Spy\n 'Charisma': '😏',\n 'Termination': '🗡️',\n 'Concealment': '🌑',\n 'Surveillance': '🔭',\n 'Stenography': '📝',\n 'Infiltration': '🚪',\n 'Impersonation': '🥸',\n // Wizard\n 'Evocation': '✨',\n 'Planeshifting': '🚀',\n 'Magecraft': '📖',\n 'Projection': '📡',\n 'Trickery': '🃏',\n // Legendary\n 'Legendary': '⭐',\n};\n\n// SVG Icons\nconst Icons = {\n chevronDown: '',\n check: '',\n download: '',\n x: '',\n search: '',\n lock: '',\n};\n\nfunction Icon({ name, className }) {\n return React.createElement('span', {\n className,\n dangerouslySetInnerHTML: { __html: Icons[name] },\n style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }\n });\n}\n\n// Strip HTML tags for plain text\nfunction stripHtml(html) {\n if (!html) return '';\n return html.replace(/<[^>]*>/g, '').trim();\n}\n\n// LocalStorage helpers\nfunction loadSelections() {\n try {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) {\n const data = JSON.parse(saved);\n return {\n ids: new Set(data.ids || []),\n abilities: data.abilities || []\n };\n }\n } catch (e) {\n console.warn('Failed to load selections:', e);\n }\n return { ids: new Set(), abilities: [] };\n}\n\nfunction saveSelections(ids, abilities) {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify({\n ids: Array.from(ids),\n abilities\n }));\n } catch (e) {\n console.warn('Failed to save selections:', e);\n }\n}\n\n// PDF Generation - Tarot-sized cards (70mm x 120mm)\nasync function downloadPDF(selectedAbilities) {\n if (!window.jspdf) {\n alert(\"PDF loading... try again in a moment.\");\n return;\n }\n \n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'letter' });\n \n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n const marginX = (215.9 - cardW * 2) / 3;\n const marginY = 15, gapY = 10;\n \n selectedAbilities.forEach((ability, i) => {\n if (i > 0 && i % 4 === 0) doc.addPage();\n \n const col = i % 2;\n const row = Math.floor((i % 4) / 2);\n const x = marginX + col * (cardW + marginX);\n const y = marginY + row * (cardH + gapY);\n \n doc.setLineWidth(0.8);\n doc.setDrawColor(30, 30, 30);\n doc.setFillColor(255, 255, 255);\n doc.roundedRect(x, y, cardW, cardH, cornerRadius, cornerRadius, 'FD');\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(14);\n doc.setTextColor(30, 30, 30);\n \n const nameLines = doc.splitTextToSize(ability.name.toUpperCase(), cardW - 12);\n doc.text(nameLines, x + cardW / 2, y + 14, { align: 'center' });\n \n const nameHeight = nameLines.length * 5;\n doc.setFontSize(8);\n doc.setTextColor(100);\n doc.text((ability.role + ' • ' + ability.path).toUpperCase(), x + cardW / 2, y + 14 + nameHeight + 2, { align: 'center' });\n \n const lineY = y + 14 + nameHeight + 8;\n doc.setLineWidth(0.4);\n doc.setDrawColor(180);\n doc.line(x + 10, lineY, x + cardW - 10, lineY);\n \n let textY = lineY + 6;\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(8);\n doc.setTextColor(50);\n \n if (ability.subAbilities && ability.subAbilities.length > 0) {\n ability.subAbilities.forEach((sub, si) => {\n if (textY > y + cardH - 20) return;\n \n if (sub.ap !== undefined) {\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(7);\n doc.setTextColor(180, 20, 80);\n doc.text(sub.ap + ' AP', x + 6, textY);\n textY += 4;\n }\n \n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(7.5);\n doc.setTextColor(50);\n const text = stripHtml(sub.text);\n const lines = doc.splitTextToSize(text, cardW - 12);\n const maxLines = Math.floor((y + cardH - 15 - textY) / 3.2);\n const displayLines = lines.slice(0, Math.max(1, maxLines));\n \n displayLines.forEach((line, li) => {\n if (textY < y + cardH - 15) {\n doc.text(line, x + 6, textY);\n textY += 3.2;\n }\n });\n \n if (lines.length > displayLines.length) {\n doc.text('...', x + 6, textY);\n textY += 3.2;\n }\n \n textY += 2;\n });\n }\n \n doc.setFontSize(6);\n doc.setTextColor(150);\n doc.text(\"QUEST RPG\", x + cardW / 2, y + cardH - 5, { align: 'center' });\n });\n \n doc.save('Quest_Ability_Cards.pdf');\n}\n\n// Components\nfunction AbilityCard({ ability, isSelected, isLocked, onToggle, role, path, searchTerm, index }) {\n const [expanded, setExpanded] = useState(false);\n \n const highlightText = (text) => {\n if (!searchTerm || !text) return text;\n const lowerText = text.toLowerCase();\n const lowerSearch = searchTerm.toLowerCase();\n const idx = lowerText.indexOf(lowerSearch);\n if (idx === -1) return text;\n return text.slice(0, idx) + '' + text.slice(idx, idx + searchTerm.length) + '' + text.slice(idx + searchTerm.length);\n };\n \n const handleHeaderClick = (e) => {\n if (isLocked) {\n setExpanded(!expanded);\n return;\n }\n if (e.target.closest('.ability-checkbox')) {\n onToggle();\n } else {\n setExpanded(!expanded);\n }\n };\n \n const colors = ROLE_COLORS[role] || ROLE_COLORS.doctor;\n \n return React.createElement('div', { \n className: 'ability-card ' + (isSelected ? 'selected' : '') + (isLocked ? ' locked' : ''),\n style: isSelected ? { borderColor: colors.activeBg, boxShadow: '0 0 0 1px ' + colors.activeBg } : {}\n },\n React.createElement('div', { \n className: 'ability-header',\n onClick: handleHeaderClick\n },\n React.createElement('div', { \n className: 'ability-checkbox ' + (isSelected ? 'checked' : '') + (isLocked ? ' locked' : ''),\n style: isSelected ? { backgroundColor: colors.activeBg, borderColor: colors.activeBg } : {},\n onClick: (e) => { e.stopPropagation(); if (!isLocked) onToggle(); }\n },\n isLocked \n ? React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.lock } })\n : isSelected && React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.check } })\n ),\n React.createElement('span', { className: 'ability-index' }, index + 1),\n React.createElement('span', { \n className: 'ability-name',\n dangerouslySetInnerHTML: { __html: highlightText(ability.name) }\n }),\n React.createElement('span', { \n className: 'ability-expand ' + (expanded ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'ability-details ' + (expanded ? 'open' : '') },\n ability.prefixText && React.createElement('p', { \n dangerouslySetInnerHTML: { __html: ability.prefixText } \n }),\n ability.subAbilities && ability.subAbilities.map((sub, i) => \n React.createElement('div', { key: i, className: 'sub-ability' },\n sub.ap !== undefined && React.createElement('div', { className: 'ap-cost' }, sub.ap + ' AP'),\n React.createElement('div', { \n className: 'sub-ability-text',\n dangerouslySetInnerHTML: { __html: sub.text }\n }),\n sub.table && React.createElement('table', { className: 'roll-table' },\n React.createElement('thead', null,\n React.createElement('tr', null,\n React.createElement('th', null, 'Roll'),\n React.createElement('th', null, 'Result')\n )\n ),\n React.createElement('tbody', null,\n sub.table.map((entry, j) => \n React.createElement('tr', { key: j },\n React.createElement('td', null, \n entry.ceiling ? entry.floor + '-' + entry.ceiling : entry.floor\n ),\n React.createElement('td', null, entry.result)\n )\n )\n )\n )\n )\n ),\n ability.suffixText && React.createElement('p', { \n dangerouslySetInnerHTML: { __html: ability.suffixText } \n })\n )\n );\n}\n\nfunction PathSection({ pathName, abilities, selectedIds, onToggle, onSelectAll, onDeselectAll, role, searchTerm }) {\n const [open, setOpen] = useState(false);\n \n const pathAbilityIds = abilities.map(a => role + '/' + pathName + '/' + a.name);\n const selectedCount = pathAbilityIds.filter(id => selectedIds.has(id)).length;\n const allSelected = selectedCount === abilities.length;\n \n // Calculate which abilities are locked (skill tree logic)\n const getLockedStatus = (index) => {\n if (index === 0) return false; // First ability is never locked\n const prevId = role + '/' + pathName + '/' + abilities[index - 1].name;\n return !selectedIds.has(prevId);\n };\n \n const filteredAbilities = searchTerm \n ? abilities.filter(a => \n a.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n (a.subAbilities && a.subAbilities.some(sub => \n sub.text && stripHtml(sub.text).toLowerCase().includes(searchTerm.toLowerCase())\n ))\n )\n : abilities;\n \n useEffect(() => {\n if (searchTerm && filteredAbilities.length > 0) {\n setOpen(true);\n }\n }, [searchTerm, filteredAbilities.length]);\n \n if (searchTerm && filteredAbilities.length === 0) return null;\n \n const emoji = PATH_EMOJIS[pathName] || '✨';\n const colors = ROLE_COLORS[role] || ROLE_COLORS.doctor;\n \n // Select all that are unlocked in order\n const handleSelectAllInOrder = () => {\n const newIds = new Set(selectedIds);\n const newAbilities = [];\n \n // Select abilities in order until we hit the end\n for (const ability of abilities) {\n const id = role + '/' + pathName + '/' + ability.name;\n if (!newIds.has(id)) {\n newIds.add(id);\n newAbilities.push({\n id,\n ...ability,\n role: role.charAt(0).toUpperCase() + role.slice(1),\n path: pathName\n });\n }\n }\n \n onSelectAll(pathName, abilities);\n };\n \n return React.createElement('div', { className: 'path-section' },\n React.createElement('div', { \n className: 'path-header',\n onClick: () => setOpen(!open),\n style: { borderLeftColor: colors.activeBg, borderLeftWidth: '4px' }\n },\n React.createElement('span', { className: 'path-emoji' }, emoji),\n React.createElement('span', { className: 'path-name' }, pathName),\n React.createElement('span', { className: 'path-count' }, \n selectedCount > 0 ? selectedCount + '/' + abilities.length + ' • ' : '',\n abilities.length + ' abilities'\n ),\n React.createElement('span', { \n className: 'path-chevron ' + (open ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'path-abilities ' + (open ? 'open' : '') },\n React.createElement('div', { className: 'path-actions' },\n !allSelected && React.createElement('button', { \n className: 'path-action-btn',\n onClick: (e) => { e.stopPropagation(); handleSelectAllInOrder(); }\n }, 'Select all'),\n selectedCount > 0 && React.createElement('button', { \n className: 'path-action-btn',\n onClick: (e) => { e.stopPropagation(); onDeselectAll(pathName, abilities); }\n }, 'Deselect all')\n ),\n (searchTerm ? filteredAbilities : abilities).map((ability, i) => {\n const originalIndex = searchTerm ? abilities.findIndex(a => a.name === ability.name) : i;\n const id = role + '/' + pathName + '/' + ability.name;\n const isLocked = getLockedStatus(originalIndex);\n return React.createElement(AbilityCard, {\n key: i,\n ability,\n isSelected: selectedIds.has(id),\n isLocked,\n onToggle: () => onToggle(id, ability, role, pathName),\n role,\n path: pathName,\n searchTerm,\n index: originalIndex\n });\n })\n )\n );\n}\n\nfunction PrintToolbar({ count, onPrint, onClear }) {\n return React.createElement('div', { className: 'print-toolbar ' + (count > 0 ? 'visible' : '') },\n React.createElement('span', { className: 'selection-count' }, count + ' CARDS SELECTED'),\n React.createElement('button', { className: 'btn btn-danger', onClick: onClear },\n React.createElement(Icon, { name: 'x' }),\n 'CLEAR'\n ),\n React.createElement('button', { className: 'btn btn-primary', onClick: onPrint },\n React.createElement(Icon, { name: 'download' }),\n 'PRINT PDF'\n )\n );\n}\n\nfunction SearchBar({ value, onChange }) {\n return React.createElement('div', { className: 'search-bar' },\n React.createElement('span', { className: 'search-icon', dangerouslySetInnerHTML: { __html: Icons.search } }),\n React.createElement('input', {\n type: 'text',\n placeholder: 'Search abilities...',\n value,\n onChange: (e) => onChange(e.target.value)\n }),\n value && React.createElement('button', { \n className: 'search-clear',\n onClick: () => onChange('')\n }, '×')\n );\n}\n\nfunction Attribution() {\n return React.createElement('footer', { className: 'attribution' },\n React.createElement('p', null, \n 'Ability data from ',\n React.createElement('a', { href: 'https://github.com/nboughton/Questling', target: '_blank', rel: 'noopener' }, 'Questling'),\n ' by Nick Boughton.'\n ),\n React.createElement('p', null,\n 'Quest created by T.C. Sottek. Learn more at ',\n React.createElement('a', { href: 'https://www.adventure.game/', target: '_blank', rel: 'noopener' }, 'adventure.game'),\n '.'\n )\n );\n}\n\nfunction App() {\n const [activeRole, setActiveRole] = useState('doctor');\n const [roleData, setRoleData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [searchTerm, setSearchTerm] = useState('');\n \n const [selectedIds, setSelectedIds] = useState(() => loadSelections().ids);\n const [selectedAbilities, setSelectedAbilities] = useState(() => loadSelections().abilities);\n \n useEffect(() => {\n if (!window.jspdf) {\n const script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';\n document.body.appendChild(script);\n }\n }, []);\n \n useEffect(() => {\n saveSelections(selectedIds, selectedAbilities);\n }, [selectedIds, selectedAbilities]);\n \n useEffect(() => {\n setLoading(true);\n setError(null);\n \n fetch('/api/role/' + activeRole)\n .then(res => res.json())\n .then(data => {\n if (data.error) {\n setError(data.error);\n setRoleData(null);\n } else {\n setRoleData(data);\n }\n setLoading(false);\n })\n .catch(err => {\n setError('Failed to load: ' + err.message);\n setLoading(false);\n });\n }, [activeRole]);\n \n const handleToggle = (id, ability, role, path) => {\n const newIds = new Set(selectedIds);\n const newAbilities = [...selectedAbilities];\n \n if (newIds.has(id)) {\n // When deselecting, also deselect all abilities below this one in the path\n if (roleData && roleData.paths && roleData.paths[path]) {\n const pathAbilities = roleData.paths[path];\n const abilityIndex = pathAbilities.findIndex(a => a.name === ability.name);\n // Deselect this and all subsequent abilities in the path\n for (let i = abilityIndex; i < pathAbilities.length; i++) {\n const idToRemove = role + '/' + path + '/' + pathAbilities[i].name;\n newIds.delete(idToRemove);\n const idx = newAbilities.findIndex(a => a.id === idToRemove);\n if (idx !== -1) newAbilities.splice(idx, 1);\n }\n }\n } else {\n newIds.add(id);\n newAbilities.push({\n id,\n ...ability,\n role: role.charAt(0).toUpperCase() + role.slice(1),\n path\n });\n }\n \n setSelectedIds(newIds);\n setSelectedAbilities(newAbilities);\n };\n \n const handleSelectAll = (pathName, abilities) => {\n const newIds = new Set(selectedIds);\n const newAbilities = [...selectedAbilities];\n \n abilities.forEach(ability => {\n const id = activeRole + '/' + pathName + '/' + ability.name;\n if (!newIds.has(id)) {\n newIds.add(id);\n newAbilities.push({\n id,\n ...ability,\n role: activeRole.charAt(0).toUpperCase() + activeRole.slice(1),\n path: pathName\n });\n }\n });\n \n setSelectedIds(newIds);\n setSelectedAbilities(newAbilities);\n };\n \n const handleDeselectAll = (pathName, abilities) => {\n const newIds = new Set(selectedIds);\n let newAbilities = [...selectedAbilities];\n \n abilities.forEach(ability => {\n const id = activeRole + '/' + pathName + '/' + ability.name;\n newIds.delete(id);\n newAbilities = newAbilities.filter(a => a.id !== id);\n });\n \n setSelectedIds(newIds);\n setSelectedAbilities(newAbilities);\n };\n \n const handleClear = () => {\n setSelectedIds(new Set());\n setSelectedAbilities([]);\n };\n \n const handlePrint = () => {\n if (selectedAbilities.length === 0) return;\n downloadPDF(selectedAbilities);\n };\n \n const selectedByRole = useMemo(() => {\n const counts = {};\n ROLES.forEach(r => counts[r] = 0);\n selectedAbilities.forEach(a => {\n const role = a.role.toLowerCase();\n if (counts[role] !== undefined) counts[role]++;\n });\n return counts;\n }, [selectedAbilities]);\n \n return React.createElement('div', { className: 'app' },\n React.createElement('header', null,\n React.createElement('h1', null, 'ABILITY CARDS'),\n React.createElement('span', { className: 'subtitle' }, 'QUEST RPG')\n ),\n \n React.createElement('div', { className: 'role-tabs' },\n ROLES.map(role => {\n const colors = ROLE_COLORS[role];\n const isActive = role === activeRole;\n const style = isActive \n ? { backgroundColor: colors.activeBg, color: 'white', borderColor: colors.activeBg }\n : { backgroundColor: colors.bg, borderColor: colors.border, color: colors.text };\n \n return React.createElement('button', {\n key: role,\n className: 'role-tab ' + (isActive ? 'active' : ''),\n style,\n onClick: () => setActiveRole(role)\n }, \n role,\n selectedByRole[role] > 0 && React.createElement('span', { \n className: 'role-badge',\n style: isActive ? { backgroundColor: 'white', color: colors.activeBg } : { backgroundColor: colors.activeBg, color: 'white' }\n }, selectedByRole[role])\n )\n })\n ),\n \n React.createElement(SearchBar, { value: searchTerm, onChange: setSearchTerm }),\n \n loading \n ? React.createElement('div', { className: 'loading' },\n React.createElement('div', { className: 'loading-spinner' }),\n 'Loading abilities...'\n )\n : error\n ? React.createElement('div', { className: 'card', style: { padding: '2rem', textAlign: 'center', color: '#b91c1c' } }, error)\n : roleData && roleData.paths && Object.entries(roleData.paths).map(([pathName, abilities]) =>\n React.createElement(PathSection, {\n key: pathName,\n pathName,\n abilities,\n selectedIds,\n onToggle: handleToggle,\n onSelectAll: handleSelectAll,\n onDeselectAll: handleDeselectAll,\n role: activeRole,\n searchTerm\n })\n ),\n \n React.createElement(Attribution, null),\n React.createElement(PrintToolbar, {\n count: selectedAbilities.length,\n onPrint: handlePrint,\n onClear: handleClear\n })\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));\n`;\n}\n","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/quest-abilities/code/client.ts","extension","ts","actionData","errors"]