Add Schema Explorer tab to website with interactive form builder

PROMPT.md

@@ -237,3 +237,7 @@ v1.2.0 was published with `"type": "module"` in `package.json` but `tsconfig.bui
 ## Add `encodeToRawBytes()` to SchemaCodec
 
 Add `encodeToRawBytes(value): RawBytes` method to `SchemaCodec` that encodes a value and returns a `RawBytes` with exact bit-length preserved. This avoids the precision loss from `encode()` which returns `Uint8Array` (rounded up to whole bytes). Add tests for roundtrip, bit-length preservation, equivalence with manual approach, and nested passthrough. Update encoding documentation to recommend `encodeToRawBytes` as the primary approach for embedding pre-encoded data.
+
+## Website Schema Explorer tab
+
+In website, add a new tab. There is a textarea to input an ASN.1 schema. The npm module parses the schema to generate nodes. Then each node is represented by a React component. For elements that accept inside elements such as SEQUENCE, it's recursive. Each element displays the name of the field. If a default value is present, let the user check default value or set an actual value. Inputs must implement constraints in JavaScript too.

website/src/App.tsx

@@ -4,6 +4,7 @@ import ProjectDescription from './components/ProjectDescription';
 import SchemaBuilder from './components/SchemaBuilder';
 import EncoderDecoder from './components/EncoderDecoder';
 import AsnSchemaParser from './components/AsnSchemaParser';
+import SchemaExplorer from './components/SchemaExplorer';
 import Footer from './components/Footer';
 import type { SchemaNode } from 'asn1-per-ts';
 
@@ -20,6 +21,7 @@ const DEFAULT_SCHEMA: SchemaNode = {
 };
 
 export default function App() {
+  const [activeTab, setActiveTab] = useState<'codec' | 'explorer'>('codec');
   const [schema, setSchema] = useState<SchemaNode>(DEFAULT_SCHEMA);
   const [schemaText, setSchemaText] = useState(JSON.stringify(DEFAULT_SCHEMA, null, 2));
   const [schemaError, setSchemaError] = useState<string | null>(null);
@@ -41,20 +43,58 @@ export default function App() {
       <main className="flex-1 max-w-6xl mx-auto w-full px-4 py-8 space-y-8">
         <ProjectDescription />
 
-        <section>
-          <h2 className="text-xl font-semibold mb-4">ASN.1 Schema Parser</h2>
-          <div className="bg-white rounded-lg border border-gray-200 p-6">
-            <AsnSchemaParser onSchemaSelect={handleSchemaChange} />
-          </div>
-        </section>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setActiveTab('codec')}
+            className={`px-4 py-2 text-sm rounded-lg transition-colors ${
+              activeTab === 'codec'
+                ? 'bg-indigo-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            Encode / Decode
+          </button>
+          <button
+            onClick={() => setActiveTab('explorer')}
+            className={`px-4 py-2 text-sm rounded-lg transition-colors ${
+              activeTab === 'explorer'
+                ? 'bg-indigo-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            Schema Explorer
+          </button>
+        </div>
 
-        <SchemaBuilder
-          schemaText={schemaText}
-          schemaError={schemaError}
-          onChange={handleSchemaChange}
-        />
+        {activeTab === 'codec' ? (
+          <>
+            <section>
+              <h2 className="text-xl font-semibold mb-4">ASN.1 Schema Parser</h2>
+              <div className="bg-white rounded-lg border border-gray-200 p-6">
+                <AsnSchemaParser onSchemaSelect={handleSchemaChange} />
+              </div>
+            </section>
 
-        <EncoderDecoder schema={schema} schemaError={schemaError} />
+            <SchemaBuilder
+              schemaText={schemaText}
+              schemaError={schemaError}
+              onChange={handleSchemaChange}
+            />
+
+            <EncoderDecoder schema={schema} schemaError={schemaError} />
+          </>
+        ) : (
+          <section>
+            <h2 className="text-xl font-semibold mb-4">Schema Explorer</h2>
+            <p className="text-sm text-gray-600 mb-4">
+              Parse an ASN.1 module and interactively fill in values with constraint validation,
+              then encode to PER hex.
+            </p>
+            <div className="bg-white rounded-lg border border-gray-200 p-6">
+              <SchemaExplorer />
+            </div>
+          </section>
+        )}
       </main>
       <Footer />
     </div>