@tanstack/devtools-a11y 0.0.1 → 0.1.1

package/dist/esm/core/styles/styles.js

@@ -0,0 +1,547 @@
+import { createMemo } from "solid-js";
+import { useTheme } from "@tanstack/devtools-ui";
+import * as goober from "goober";
+//#region src/core/styles/styles.ts
+var SEVERITY_COLORS = {
+	critical: "#dc2626",
+	serious: "#ea580c",
+	moderate: "#ca8a04",
+	minor: "#2563eb"
+};
+var CATEGORY_LABELS = {
+	all: "All Categories",
+	"cat.aria": "ARIA",
+	"cat.color": "Color & Contrast",
+	"cat.forms": "Forms",
+	"cat.keyboard": "Keyboard",
+	"cat.language": "Language",
+	"cat.name-role-value": "Names & Roles",
+	"cat.parsing": "Parsing",
+	"cat.semantics": "Semantics",
+	"cat.sensory-and-visual-cues": "Sensory Cues",
+	"cat.structure": "Structure",
+	"cat.tables": "Tables",
+	"cat.text-alternatives": "Text Alternatives",
+	"cat.time-and-media": "Time & Media"
+};
+var CATEGORIES = [
+	"all",
+	"cat.aria",
+	"cat.color",
+	"cat.forms",
+	"cat.keyboard",
+	"cat.language",
+	"cat.name-role-value",
+	"cat.parsing",
+	"cat.semantics",
+	"cat.sensory-and-visual-cues",
+	"cat.structure",
+	"cat.tables",
+	"cat.text-alternatives",
+	"cat.time-and-media"
+];
+var css = goober.css;
+var FONT_SCALE = 1.1;
+var fontPx = (size) => `calc(${size}px * ${FONT_SCALE})`;
+function createA11yPanelStyles(theme) {
+	const t = (light, dark) => theme === "light" ? light : dark;
+	const bg = t("#f9fafb;", "#191c24");
+	const fg = t("#1e293b", "#e2e8f0");
+	const border = t("#e2e8f0", "#292e3d");
+	const muted = t("#64748b", "#94a3b8");
+	const muted2 = t("#727c8b", "#818386");
+	return {
+		colors: {
+			bg,
+			fg,
+			border,
+			muted,
+			muted2,
+			theme
+		},
+		root: css`
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    `,
+		header: css`
+      padding: 16px;
+      border-bottom: 1px solid ${border};
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+      anchor-name: --a11y-toast-anchor;
+    `,
+		headerTitleRow: css`
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+    `,
+		headerTitle: css`
+      margin: 0;
+      font-size: ${fontPx(16)};
+      font-weight: 600;
+    `,
+		headerSub: css`
+      font-size: ${fontPx(12)};
+      color: ${muted};
+      white-space: nowrap;
+    `,
+		headerActions: css`
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    `,
+		primaryButton: css`
+      padding: 8px 16px;
+      color: #fff;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 500;
+      font-size: ${fontPx(13)};
+      opacity: 1;
+    `,
+		primaryButtonDisabled: css`
+      cursor: not-allowed;
+      opacity: 0.7;
+    `,
+		button: css`
+      padding: 8px 12px;
+      color: ${fg};
+      border: 1px solid ${border};
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: ${fontPx(11)};
+    `,
+		buttonRow: css`
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    `,
+		toggleOverlay: css`
+      padding: 8px 12px;
+      color: ${fg};
+      border: 1px solid ${border};
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: ${fontPx(13)};
+    `,
+		toggleOverlayOn: css`
+      background: #10b981;
+      color: #fff;
+      border-color: #10b981;
+    `,
+		statusBar: css`
+      padding: 8px 16px;
+      border-bottom: 1px solid ${border};
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-shrink: 0;
+      font-size: ${fontPx(11)};
+      color: ${muted};
+    `,
+		statusSpacer: css`
+      flex: 1;
+    `,
+		smallLinkButton: css`
+      padding: 4px 10px;
+      background: transparent;
+      color: #0ea5e9;
+      border: 1px solid ${border};
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: ${fontPx(11)};
+      font-weight: 500;
+    `,
+		content: css`
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    `,
+		emptyState: css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      text-align: center;
+      color: ${muted};
+    `,
+		emptyPrimary: css`
+      font-size: ${fontPx(14)};
+      margin: 0 0 8px 0;
+    `,
+		emptySecondary: css`
+      font-size: ${fontPx(12)};
+      margin: 0;
+    `,
+		successState: css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      text-align: center;
+    `,
+		successTitle: css`
+      font-size: ${fontPx(16)};
+      color: #10b981;
+      font-weight: 600;
+      margin: 0;
+    `,
+		successSub: css`
+      font-size: ${fontPx(12)};
+      color: ${muted};
+      margin-top: 8px;
+      margin-bottom: 0;
+    `,
+		summaryGrid: css`
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 12px;
+      margin-bottom: 20px;
+
+      @media (max-width: 520px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    `,
+		summaryButton: css`
+      padding: 12px;
+      color: ${fg};
+      background: ${bg};
+      border-radius: 8px;
+      border: 1px solid ${border};
+      text-align: left;
+      cursor: pointer;
+      box-shadow: none;
+
+      &:hover {
+        background: ${t("#f0f2f5", "#111318")};
+      }
+    `,
+		summaryButtonActive: (impact) => css`
+      box-shadow: 0 0 0 2px ${SEVERITY_COLORS[impact]};
+    `,
+		summaryCount: (impact) => css`
+      font-size: ${fontPx(24)};
+      font-weight: 700;
+      color: ${SEVERITY_COLORS[impact]};
+    `,
+		summaryLabel: css`
+      font-size: ${fontPx(11)};
+      color: ${muted};
+      text-transform: uppercase;
+    `,
+		section: css`
+      margin-bottom: 16px;
+    `,
+		sectionTitle: (impact) => css`
+      color: ${SEVERITY_COLORS[impact]};
+      font-size: ${fontPx(13)};
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    `,
+		issueCard: css`
+      padding: 12px;
+      margin-bottom: 8px;
+      border: 1px solid ${border};
+      border-radius: 6px;
+      cursor: pointer;
+    `,
+		issueCardSelected: css`
+      background: ${t("#e0f2fe", "#1e3a5f")};
+      border-color: #0ea5e9;
+    `,
+		issueRow: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 12px;
+    `,
+		issueMain: css`
+      flex: 1;
+      min-width: 0;
+    `,
+		issueTitleRow: css`
+      font-weight: 600;
+      font-size: ${fontPx(13)};
+      margin-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    `,
+		dot: (impact) => css`
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: ${SEVERITY_COLORS[impact]};
+      flex-shrink: 0;
+    `,
+		issueMessage: css`
+      font-size: ${fontPx(12)};
+      color: ${t("#475569", "#cbd5e1")};
+      margin: 0 0 8px 0;
+      line-height: 1.4;
+    `,
+		selector: css`
+      font-size: ${fontPx(10)};
+      color: ${muted2};
+      font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        'Liberation Mono', 'Courier New', monospace;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+		issueAside: css`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 4px;
+      flex-shrink: 0;
+    `,
+		helpLink: css`
+      font-size: ${fontPx(12)};
+      color: #0ea5e9;
+      padding: 0 12px;
+      font-weight: 600;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+
+      &:hover {
+        color: #0284c7;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #0ea5e9;
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+    `,
+		disableRule: css`
+      font-size: ${fontPx(10)};
+      color: ${muted};
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      font-weight: 600;
+
+      &:hover {
+        color: #000000;
+      }
+
+      &:focus-visible {
+        outline: 2px solid #0ea5e9;
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+    `,
+		tags: css`
+      display: flex;
+      gap: 4px;
+      margin-top: 8px;
+      flex-wrap: wrap;
+    `,
+		tag: css`
+      font-size: ${fontPx(10)};
+      padding: 2px 6px;
+      border: 1px solid ${border};
+      border-radius: 4px;
+      color: ${muted};
+    `,
+		settingsOverlay: css`
+      position: absolute;
+      inset: 0;
+      background: ${bg};
+      display: flex;
+      flex-direction: column;
+      z-index: 10;
+    `,
+		settingsHeader: css`
+      padding: 12px 16px;
+      border-bottom: 1px solid ${border};
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    `,
+		settingsTitle: css`
+      margin: 0;
+      font-size: ${fontPx(14)};
+      font-weight: 600;
+    `,
+		doneButton: css`
+      padding: 6px 12px;
+      background: ${bg};
+      color: ${bg};
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: ${fontPx(12)};
+      font-weight: 500;
+    `,
+		settingsContent: css`
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    `,
+		settingsSection: css`
+      margin-bottom: 24px;
+    `,
+		settingsRowStack: css`
+      display: grid;
+      gap: 12px;
+    `,
+		settingsSectionLabel: css`
+      margin: 0 0 12px 0;
+      font-size: ${fontPx(12)};
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: ${muted};
+    `,
+		settingsRow: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid ${border};
+      gap: 12px;
+    `,
+		settingsRowTitle: css`
+      font-size: ${fontPx(13)};
+      font-weight: 500;
+    `,
+		settingsRowDesc: css`
+      font-size: ${fontPx(11)};
+      color: ${muted};
+      margin-top: 2px;
+    `,
+		select: css`
+      padding: 6px 10px;
+      border: 1px solid ${border};
+      border-radius: 4px;
+      background: ${bg};
+      color: ${fg};
+      font-size: ${fontPx(12)};
+    `,
+		rulesHeaderRow: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      gap: 12px;
+      flex-wrap: wrap;
+    `,
+		rulesHeaderActions: css`
+      display: flex;
+      gap: 6px;
+    `,
+		filtersRow: css`
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    `,
+		search: css`
+      flex: 1;
+      min-width: 180px;
+      padding: 8px 10px;
+      border: 1px solid ${border};
+      border-radius: 4px;
+      background: ${bg};
+      color: ${fg};
+      font-size: ${fontPx(12)};
+      box-sizing: border-box;
+    `,
+		rulesList: css`
+      border: 1px solid ${border};
+      border-radius: 6px;
+      overflow-y: auto;
+    `,
+		ruleRow: css`
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 10px;
+      cursor: pointer;
+      opacity: 1;
+      background: transparent;
+
+      &:hover {
+        background: ${t("#f0f2f5", "#111318")};
+      }
+    `,
+		ruleRowDisabled: css`
+      opacity: 0.6;
+    `,
+		ruleRowBorder: css`
+      border-bottom: 1px solid ${border};
+    `,
+		ruleCheckbox: css`
+      margin-top: 2px;
+      flex-shrink: 0;
+    `,
+		ruleInfo: css`
+      flex: 1;
+      min-width: 0;
+    `,
+		ruleTop: css`
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 2px;
+    `,
+		ruleId: css`
+      font-weight: 500;
+      font-size: ${fontPx(12)};
+      text-decoration: none;
+    `,
+		ruleIdDisabled: css`
+      text-decoration: line-through;
+    `,
+		bpBadge: css`
+      font-size: ${fontPx(9)};
+      padding: 1px 4px;
+      background: #f59e0b;
+      color: #fff;
+      border-radius: 3px;
+      font-weight: 500;
+    `,
+		ruleDesc: css`
+      font-size: ${fontPx(11)};
+      color: ${muted};
+      line-height: 2;
+    `,
+		catTagRow: css`
+      display: flex;
+      gap: 4px;
+      margin-top: 4px;
+    `,
+		catTag: css`
+      font-size: ${fontPx(9)};
+      padding: 1px 4px;
+      border: 1px solid ${muted};
+      border-radius: 3px;
+      color: ${muted};
+    `
+	};
+}
+function useStyles() {
+	const { theme } = useTheme();
+	return createMemo(() => createA11yPanelStyles(theme()));
+}
+//#endregion
+export { CATEGORIES, CATEGORY_LABELS, useStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/esm/core/styles/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../../src/core/styles/styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { useTheme } from '@tanstack/devtools-ui'\nimport { createMemo } from 'solid-js'\n\nimport type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'\nimport type { RuleCategory, SeverityThreshold } from '../types/types'\n\nconst SEVERITY_COLORS: Record<SeverityThreshold, string> = {\n  critical: '#dc2626',\n  serious: '#ea580c',\n  moderate: '#ca8a04',\n  minor: '#2563eb',\n}\n\nexport const CATEGORY_LABELS: Record<RuleCategory, string> = {\n  all: 'All Categories',\n  'cat.aria': 'ARIA',\n  'cat.color': 'Color & Contrast',\n  'cat.forms': 'Forms',\n  'cat.keyboard': 'Keyboard',\n  'cat.language': 'Language',\n  'cat.name-role-value': 'Names & Roles',\n  'cat.parsing': 'Parsing',\n  'cat.semantics': 'Semantics',\n  'cat.sensory-and-visual-cues': 'Sensory Cues',\n  'cat.structure': 'Structure',\n  'cat.tables': 'Tables',\n  'cat.text-alternatives': 'Text Alternatives',\n  'cat.time-and-media': 'Time & Media',\n}\n\nexport const CATEGORIES: Array<RuleCategory> = [\n  'all',\n  'cat.aria',\n  'cat.color',\n  'cat.forms',\n  'cat.keyboard',\n  'cat.language',\n  'cat.name-role-value',\n  'cat.parsing',\n  'cat.semantics',\n  'cat.sensory-and-visual-cues',\n  'cat.structure',\n  'cat.tables',\n  'cat.text-alternatives',\n  'cat.time-and-media',\n]\n\nconst css = goober.css\nconst FONT_SCALE = 1.1\nconst fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`\n\nfunction createA11yPanelStyles(theme: TanStackDevtoolsTheme) {\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  const bg = t('#f9fafb;', '#191c24')\n  const fg = t('#1e293b', '#e2e8f0')\n  const border = t('#e2e8f0', '#292e3d')\n  const muted = t('#64748b', '#94a3b8')\n  const muted2 = t('#727c8b', '#818386')\n\n  return {\n    colors: { bg, fg, border, muted, muted2, theme },\n\n    root: css`\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      position: relative;\n    `,\n\n    header: css`\n      padding: 16px;\n      border-bottom: 1px solid ${border};\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-shrink: 0;\n      anchor-name: --a11y-toast-anchor;\n    `,\n    headerTitleRow: css`\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      min-width: 0;\n    `,\n    headerTitle: css`\n      margin: 0;\n      font-size: ${fontPx(16)};\n      font-weight: 600;\n    `,\n    headerSub: css`\n      font-size: ${fontPx(12)};\n      color: ${muted};\n      white-space: nowrap;\n    `,\n    headerActions: css`\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      flex-wrap: wrap;\n      justify-content: flex-end;\n    `,\n    primaryButton: css`\n      padding: 8px 16px;\n      color: #fff;\n      border-radius: 6px;\n      cursor: pointer;\n      font-weight: 500;\n      font-size: ${fontPx(13)};\n      opacity: 1;\n    `,\n    primaryButtonDisabled: css`\n      cursor: not-allowed;\n      opacity: 0.7;\n    `,\n    button: css`\n      padding: 8px 12px;\n      color: ${fg};\n      border: 1px solid ${border};\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: ${fontPx(11)};\n    `,\n    buttonRow: css`\n      display: flex;\n      gap: 6px;\n      align-items: center;\n    `,\n    toggleOverlay: css`\n      padding: 8px 12px;\n      color: ${fg};\n      border: 1px solid ${border};\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: ${fontPx(13)};\n    `,\n    toggleOverlayOn: css`\n      background: #10b981;\n      color: #fff;\n      border-color: #10b981;\n    `,\n\n    statusBar: css`\n      padding: 8px 16px;\n      border-bottom: 1px solid ${border};\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-shrink: 0;\n      font-size: ${fontPx(11)};\n      color: ${muted};\n    `,\n    statusSpacer: css`\n      flex: 1;\n    `,\n    smallLinkButton: css`\n      padding: 4px 10px;\n      background: transparent;\n      color: #0ea5e9;\n      border: 1px solid ${border};\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: ${fontPx(11)};\n      font-weight: 500;\n    `,\n\n    content: css`\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px;\n    `,\n    emptyState: css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      color: ${muted};\n    `,\n    emptyPrimary: css`\n      font-size: ${fontPx(14)};\n      margin: 0 0 8px 0;\n    `,\n    emptySecondary: css`\n      font-size: ${fontPx(12)};\n      margin: 0;\n    `,\n    successState: css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n    `,\n    successTitle: css`\n      font-size: ${fontPx(16)};\n      color: #10b981;\n      font-weight: 600;\n      margin: 0;\n    `,\n    successSub: css`\n      font-size: ${fontPx(12)};\n      color: ${muted};\n      margin-top: 8px;\n      margin-bottom: 0;\n    `,\n\n    summaryGrid: css`\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 12px;\n      margin-bottom: 20px;\n\n      @media (max-width: 520px) {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    `,\n    summaryButton: css`\n      padding: 12px;\n      color: ${fg};\n      background: ${bg};\n      border-radius: 8px;\n      border: 1px solid ${border};\n      text-align: left;\n      cursor: pointer;\n      box-shadow: none;\n\n      &:hover {\n        background: ${t('#f0f2f5', '#111318')};\n      }\n    `,\n    summaryButtonActive: (impact: SeverityThreshold) => css`\n      box-shadow: 0 0 0 2px ${SEVERITY_COLORS[impact]};\n    `,\n    summaryCount: (impact: SeverityThreshold) => css`\n      font-size: ${fontPx(24)};\n      font-weight: 700;\n      color: ${SEVERITY_COLORS[impact]};\n    `,\n    summaryLabel: css`\n      font-size: ${fontPx(11)};\n      color: ${muted};\n      text-transform: uppercase;\n    `,\n\n    section: css`\n      margin-bottom: 16px;\n    `,\n    sectionTitle: (impact: SeverityThreshold) => css`\n      color: ${SEVERITY_COLORS[impact]};\n      font-size: ${fontPx(13)};\n      font-weight: 600;\n      margin: 0 0 8px 0;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    `,\n\n    issueCard: css`\n      padding: 12px;\n      margin-bottom: 8px;\n      border: 1px solid ${border};\n      border-radius: 6px;\n      cursor: pointer;\n    `,\n    issueCardSelected: css`\n      background: ${t('#e0f2fe', '#1e3a5f')};\n      border-color: #0ea5e9;\n    `,\n    issueRow: css`\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      gap: 12px;\n    `,\n    issueMain: css`\n      flex: 1;\n      min-width: 0;\n    `,\n    issueTitleRow: css`\n      font-weight: 600;\n      font-size: ${fontPx(13)};\n      margin-bottom: 4px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    `,\n    dot: (impact: SeverityThreshold) => css`\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: ${SEVERITY_COLORS[impact]};\n      flex-shrink: 0;\n    `,\n    issueMessage: css`\n      font-size: ${fontPx(12)};\n      color: ${t('#475569', '#cbd5e1')};\n      margin: 0 0 8px 0;\n      line-height: 1.4;\n    `,\n    selector: css`\n      font-size: ${fontPx(10)};\n      color: ${muted2};\n      font-family:\n        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n        'Liberation Mono', 'Courier New', monospace;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `,\n    issueAside: css`\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 4px;\n      flex-shrink: 0;\n    `,\n    helpLink: css`\n      font-size: ${fontPx(12)};\n      color: #0ea5e9;\n      padding: 0 12px;\n      font-weight: 600;\n      text-decoration: underline;\n      text-underline-offset: 2px;\n\n      &:hover {\n        color: #0284c7;\n      }\n\n      &:focus-visible {\n        outline: 2px solid #0ea5e9;\n        outline-offset: 2px;\n        border-radius: 4px;\n      }\n    `,\n    disableRule: css`\n      font-size: ${fontPx(10)};\n      color: ${muted};\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 0;\n      font-weight: 600;\n\n      &:hover {\n        color: #000000;\n      }\n\n      &:focus-visible {\n        outline: 2px solid #0ea5e9;\n        outline-offset: 2px;\n        border-radius: 4px;\n      }\n    `,\n    tags: css`\n      display: flex;\n      gap: 4px;\n      margin-top: 8px;\n      flex-wrap: wrap;\n    `,\n    tag: css`\n      font-size: ${fontPx(10)};\n      padding: 2px 6px;\n      border: 1px solid ${border};\n      border-radius: 4px;\n      color: ${muted};\n    `,\n\n    settingsOverlay: css`\n      position: absolute;\n      inset: 0;\n      background: ${bg};\n      display: flex;\n      flex-direction: column;\n      z-index: 10;\n    `,\n    settingsHeader: css`\n      padding: 12px 16px;\n      border-bottom: 1px solid ${border};\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-shrink: 0;\n    `,\n    settingsTitle: css`\n      margin: 0;\n      font-size: ${fontPx(14)};\n      font-weight: 600;\n    `,\n    doneButton: css`\n      padding: 6px 12px;\n      background: ${bg};\n      color: ${bg};\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: ${fontPx(12)};\n      font-weight: 500;\n    `,\n    settingsContent: css`\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px;\n    `,\n    settingsSection: css`\n      margin-bottom: 24px;\n    `,\n    settingsRowStack: css`\n      display: grid;\n      gap: 12px;\n    `,\n    settingsSectionLabel: css`\n      margin: 0 0 12px 0;\n      font-size: ${fontPx(12)};\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      color: ${muted};\n    `,\n    settingsRow: css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 0;\n      border-bottom: 1px solid ${border};\n      gap: 12px;\n    `,\n    settingsRowTitle: css`\n      font-size: ${fontPx(13)};\n      font-weight: 500;\n    `,\n    settingsRowDesc: css`\n      font-size: ${fontPx(11)};\n      color: ${muted};\n      margin-top: 2px;\n    `,\n    select: css`\n      padding: 6px 10px;\n      border: 1px solid ${border};\n      border-radius: 4px;\n      background: ${bg};\n      color: ${fg};\n      font-size: ${fontPx(12)};\n    `,\n    rulesHeaderRow: css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 12px;\n      gap: 12px;\n      flex-wrap: wrap;\n    `,\n    rulesHeaderActions: css`\n      display: flex;\n      gap: 6px;\n    `,\n    filtersRow: css`\n      display: flex;\n      gap: 8px;\n      margin-bottom: 12px;\n      flex-wrap: wrap;\n    `,\n    search: css`\n      flex: 1;\n      min-width: 180px;\n      padding: 8px 10px;\n      border: 1px solid ${border};\n      border-radius: 4px;\n      background: ${bg};\n      color: ${fg};\n      font-size: ${fontPx(12)};\n      box-sizing: border-box;\n    `,\n    rulesList: css`\n      border: 1px solid ${border};\n      border-radius: 6px;\n      overflow-y: auto;\n    `,\n    ruleRow: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      padding: 8px 10px;\n      cursor: pointer;\n      opacity: 1;\n      background: transparent;\n\n      &:hover {\n        background: ${t('#f0f2f5', '#111318')};\n      }\n    `,\n    ruleRowDisabled: css`\n      opacity: 0.6;\n    `,\n    ruleRowBorder: css`\n      border-bottom: 1px solid ${border};\n    `,\n    ruleCheckbox: css`\n      margin-top: 2px;\n      flex-shrink: 0;\n    `,\n    ruleInfo: css`\n      flex: 1;\n      min-width: 0;\n    `,\n    ruleTop: css`\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      margin-bottom: 2px;\n    `,\n    ruleId: css`\n      font-weight: 500;\n      font-size: ${fontPx(12)};\n      text-decoration: none;\n    `,\n    ruleIdDisabled: css`\n      text-decoration: line-through;\n    `,\n    bpBadge: css`\n      font-size: ${fontPx(9)};\n      padding: 1px 4px;\n      background: #f59e0b;\n      color: #fff;\n      border-radius: 3px;\n      font-weight: 500;\n    `,\n    ruleDesc: css`\n      font-size: ${fontPx(11)};\n      color: ${muted};\n      line-height: 2;\n    `,\n    catTagRow: css`\n      display: flex;\n      gap: 4px;\n      margin-top: 4px;\n    `,\n    catTag: css`\n      font-size: ${fontPx(9)};\n      padding: 1px 4px;\n      border: 1px solid ${muted};\n      border-radius: 3px;\n      color: ${muted};\n    `,\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const styles = createMemo(() => createA11yPanelStyles(theme()))\n\n  return styles\n}\n"],"mappings":"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"}