fix(c): schema editor

Author: brianorwhatever

bun.lockb

@@ -20,6 +20,7 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@headlessui/react": "^2.2.0",
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-tooltip": "^1.1.7",
     "@uiw/react-codemirror": "^4.23.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package.json

@@ -79,7 +79,7 @@ export function ContextChipInput({ contexts, onChange }: ContextChipInputProps)
             </div>
             {hoveredIndex === index && (
               <div className="absolute left-0 bottom-full mb-2 z-50">
-                <div className="bg-gray-900 px-2 py-1 rounded text-xs whitespace-nowrap">
+                <div className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-xs whitespace-nowrap">
                   <div>{context.uri}</div>
                   {context.description && (
                     <div className="text-gray-400">{context.description}</div>

src/components/editor/ContextChipInput.tsx

@@ -41,7 +41,7 @@ const FieldComponent: React.FC<FieldComponentProps> = ({
                 className="text-gray-400 hover:text-gray-300 cursor-help" 
               />
               <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden group-hover:block">
-                <div className="bg-gray-900 text-sm rounded px-2 py-1 whitespace-nowrap">
+                <div className="text-sm rounded px-2 py-1 whitespace-nowrap">
                   {field.$comment}
                 </div>
               </div>

src/components/editor/FieldComponent.tsx

@@ -10,6 +10,7 @@ import { ContextChipInput } from './ContextChipInput';
 import Editor from '@monaco-editor/react';
 import { Tabs, Tab, TabPanel } from "../../components/tabs/Tabs";
 import { Button } from '../button/Button';
+import { Tooltip } from '../tooltip/Tooltip';
 
 interface Errors {
   title?: string;
@@ -854,8 +855,8 @@ export function SchemaEditor({
             {/* Tabs Section */}
             <div className="border-b border-gray-200 dark:border-gray-700">
               <Tabs defaultValue="form">
-                <Tab value="form">Form View</Tab>
-                <Tab value="json">JSON View</Tab>
+                <Tab value="form" type="button">Form View</Tab>
+                <Tab value="json" type="button">JSON View</Tab>
 
                 <TabPanel value="form">
                   <div className="space-y-6">
@@ -888,12 +889,14 @@ export function SchemaEditor({
                     </div>
                     <div className="mb-4">
                       <label className="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
-                        <input
-                          type="checkbox"
-                          checked={formData.allowId}
-                          onChange={(e) => setFormData({ ...formData, allowId: e.target.checked })}
-                          className="form-checkbox h-4 w-4 text-blue-500"
-                        />
+                        <Tooltip content="Enable ID field">
+                          <input
+                            type="checkbox"
+                            checked={formData.allowId}
+                            onChange={(e) => setFormData({ ...formData, allowId: e.target.checked })}
+                            className="form-checkbox h-4 w-4 text-blue-500"
+                          />
+                        </Tooltip>
                         <span>Allow ID field (URI format)</span>
                       </label>
                       <p className="text-gray-600 dark:text-gray-400 text-sm mt-1">
@@ -1097,10 +1100,14 @@ export function SchemaEditor({
                       <div className="w-2 h-2 rounded-full border-2 border-current border-t-transparent animate-spin" />
                     )}
                     {normalizationStatus === 'valid' && (
-                      <div className="w-2 h-2 rounded-full bg-emerald-400 dark:bg-emerald-500" title="Valid JSON-LD" />
+                      <Tooltip content="Valid JSON-LD">
+                        <div className="w-2 h-2 rounded-full bg-emerald-400 dark:bg-emerald-500" />
+                      </Tooltip>
                     )}
                     {normalizationStatus === 'invalid' && (
-                      <div className="w-2 h-2 rounded-full bg-red-400 dark:bg-red-500" title="Invalid JSON-LD" />
+                      <Tooltip content="Invalid JSON-LD">
+                        <div className="w-2 h-2 rounded-full bg-red-400 dark:bg-red-500" />
+                      </Tooltip>
                     )}
                   </div>
                 </button>
@@ -1133,10 +1140,14 @@ export function SchemaEditor({
                     <div className="w-2 h-2 rounded-full border-2 border-current border-t-transparent animate-spin" />
                   )}
                   {normalizationStatus === 'valid' && (
-                    <div className="w-2 h-2 rounded-full bg-emerald-400 dark:bg-emerald-500" title="Valid JSON-LD" />
+                    <Tooltip content="Valid JSON-LD">
+                      <div className="w-2 h-2 rounded-full bg-emerald-400 dark:bg-emerald-500" />
+                    </Tooltip>
                   )}
                   {normalizationStatus === 'invalid' && (
-                    <div className="w-2 h-2 rounded-full bg-red-400 dark:bg-red-500" title="Invalid JSON-LD" />
+                    <Tooltip content="Invalid JSON-LD">
+                      <div className="w-2 h-2 rounded-full bg-red-400 dark:bg-red-500" />
+                    </Tooltip>
                   )}
                   <span className="text-sm text-gray-500 dark:text-gray-400">
                     {normalizationStatus === 'valid' && 'Valid JSON-LD'}

src/components/editor/SchemaEditor.tsx

@@ -13,6 +13,8 @@ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Value that identifies the tab */
   value: string;
+  /** Type of button */
+  type?: "button" | "submit" | "reset";
 }
 
 interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {