UI/UX improvements and search enhancements

.eslintrc.json

@@ -21,12 +21,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "@typescript-eslint",
-    "prettier"
-  ],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "settings": {
     "react": {
       "version": "detect"
@@ -44,13 +39,13 @@
     ],
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-explicit-any": "error",
     "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/ban-ts-comment": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": "error",
     "prettier/prettier": "error",
-    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
     "prefer-const": "error",
     "no-var": "error"
   },

.github/workflows/checks.yml

@@ -2,9 +2,9 @@ name: Checks
 
 on:
   push:
-    branches: [main, master]
+    branches: [main]
   pull_request:
-    branches: [main, master]
+    branches: [main]
 
 jobs:
   checks:

.github/workflows/pr.yml

@@ -2,7 +2,7 @@ name: Pull Request
 
 on:
   pull_request:
-    branches: [main, master]
+    branches: [main]
 
 jobs:
   pr-checks:

render.mjs

@@ -1,26 +1,24 @@
 #!/usr/bin/env node
 
-import React from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { createRequire } from "module";
-const require = createRequire(import.meta.url);
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 // Try to import the built component, fall back to source if needed
 let DeckardSchema;
 try {
-  const deckardModule = await import("./dist/index.esm.js");
+  const deckardModule = await import('./dist/index.esm.js');
   DeckardSchema = deckardModule.DeckardSchema;
 } catch (error) {
   console.error(
-    'Warning: Could not load built component, ensure "npm run build" has been run',
+    'Warning: Could not load built component, ensure "npm run build" has been run'
   );
   process.exit(1);
 }
 
 // Parse command line arguments
 const args = process.argv.slice(2);
 const schemaJson = args[0];
-const optionsJson = args[1] || "{}";
+const optionsJson = args[1] || '{}';
 
 try {
   // Parse input
@@ -32,11 +30,11 @@ try {
     React.createElement(DeckardSchema, {
       schema: schema,
       options: options,
-    }),
+    })
   );
 
   // Output the HTML
-  console.log(componentHtml);
+  process.stdout.write(componentHtml);
 } catch (error) {
   console.error(`Error rendering schema: ${error.message}`);
   process.exit(1);

src/DeckardSchema.styles.css

@@ -83,6 +83,13 @@
     --schema-accent-hover: rgba(148, 204, 235, 0.08);
     --schema-modal-bg: #ffffff;
   }
+
+  .schema-container a.link-button:hover,
+  .schema-container a.row-button.link-button:hover,
+  .schema-container a.link-button:visited:hover,
+  .schema-container a.row-button.link-button:visited:hover {
+    color: #ffffff;
+  }
 }
 
 .schema-container * {
@@ -114,6 +121,49 @@
   margin-bottom: var(--schema-space-md);
 }
 
+.schema-container .header-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--schema-space-sm);
+}
+
+.schema-container .keyboard-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--schema-space-sm);
+  border-radius: var(--schema-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: var(--schema-text-muted);
+  transition: all var(--schema-transition);
+  position: relative;
+}
+
+.schema-container .keyboard-button:focus-visible {
+  outline: none;
+  background: var(--schema-surface-hover);
+  color: var(--schema-text);
+  box-shadow: 0 0 0 2px var(--schema-accent-soft);
+}
+
+.schema-container .keyboard-button:hover {
+  background: var(--schema-surface-hover);
+  color: var(--schema-text);
+}
+
+.schema-container .keyboard-button:active {
+  transform: scale(0.95);
+}
+
+.schema-container .keyboard-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .schema-container .schema-description {
   font-size: var(--schema-text-lg);
   color: var(--schema-text-secondary);
@@ -237,18 +287,11 @@
 
 .schema-container .search-input:focus {
   outline: none;
-  box-shadow: inset 3px 0 0 var(--schema-border-focus);
   background: var(--schema-accent-hover);
 }
 
 /* ===== FOCUS STYLES ===== */
 
-.schema-container button:focus-visible {
-  outline: none;
-  box-shadow: inset 3px 0 0 var(--schema-border-focus);
-  background: var(--schema-accent-hover);
-}
-
 /* ===== ARRAY AND COMPOUND SCHEMAS ===== */
 
 .schema-container .array-section,
@@ -351,9 +394,11 @@
 }
 
 .schema-container a.link-button:hover,
-.schema-container a.row-button.link-button:hover {
+.schema-container a.row-button.link-button:hover,
+.schema-container a.link-button:visited:hover,
+.schema-container a.row-button.link-button:visited:hover {
   text-decoration: none;
-  color: var(--schema-text);
+  color: #000000;
 }
 
 /* Active route link button - red map pin */
@@ -491,6 +536,10 @@
   .schema-container .required-badge {
     font-weight: 700;
   }
+
+  .schema-container .keyboard-button {
+    border: 1px solid var(--schema-border-strong);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -505,4 +554,8 @@
   .tooltips-shimmer .tooltip-trigger {
     animation: none;
   }
+
+  .schema-container .keyboard-button:active {
+    transform: none;
+  }
 }