Add HTML inscription creator

packages/ordinals-plus-explorer/src/App.tsx

@@ -3,6 +3,7 @@ import ExplorerPage from './pages/ExplorerPage';
 import LinkedResourcesPage from './pages/LinkedResourcesPage';
 import SettingsPage from './pages/SettingsPage';
 import CreatePage from './pages/CreatePage';
+import CreateHtmlPage from './pages/CreateHtmlPage';
 import CreateCollectionPage from './pages/CreateCollectionPage';
 import CollectionsListPage from './pages/CollectionsListPage';
 import CollectionDetailPage from './pages/CollectionDetailPage';
@@ -27,6 +28,7 @@ function App() {
                   <Link to="/explorer" className="text-white hover:text-orange-200 transition-colors">Explorer</Link>
                   <Link to="/" className="text-white hover:text-orange-200 transition-colors">Resources</Link>
                   <Link to="/create" className="text-white hover:text-orange-200 transition-colors">Create</Link>
+                  <Link to="/create/html" className="text-white hover:text-orange-200 transition-colors">Create HTML</Link>
                   <div className="relative dropdown-container">
                     <Link to="/collections" className="text-white hover:text-orange-200 transition-colors flex items-center dropdown-toggle">
                       Collections
@@ -53,6 +55,7 @@ function App() {
               <Route path="/" element={<LinkedResourcesPage />} />
               <Route path="/explorer" element={<ExplorerPage />} />
               <Route path="/create" element={<CreatePage />} />
+              <Route path="/create/html" element={<CreateHtmlPage />} />
               <Route path="/collections" element={<CollectionsGalleryPage />} />
               <Route path="/collections/list" element={<CollectionsListPage />} />
               <Route path="/collections/create" element={<CreateCollectionPage />} />

packages/ordinals-plus-explorer/src/components/create/GenericOrdinalForm.tsx

@@ -16,6 +16,7 @@ bitcoin.initEccLib(ecc);
 const supportedContentTypes = [
   { mime: 'text/plain', label: 'Text', isText: true },
   { mime: 'application/json', label: 'JSON', isText: true },
+  { mime: 'text/html', label: 'HTML', isText: true },
   { mime: 'image/png', label: 'PNG Image', isText: false },
   { mime: 'image/jpeg', label: 'JPEG Image', isText: false },
   { mime: 'image/svg+xml', label: 'SVG Image', isText: false },

packages/ordinals-plus-explorer/src/components/create/ResourceCreationForm.tsx

@@ -27,6 +27,7 @@ const truncateMiddle = (str: string | null, length = 10): string => {
 const supportedContentTypes = [
   { mime: 'text/plain', label: 'Text', isText: true },
   { mime: 'application/json', label: 'JSON', isText: true },
+  { mime: 'text/html', label: 'HTML', isText: true },
   { mime: 'image/png', label: 'PNG Image', isText: false },
   { mime: 'image/jpeg', label: 'JPEG Image', isText: false },
   { mime: 'image/svg+xml', label: 'SVG Image', isText: false },

packages/ordinals-plus-explorer/src/components/inscription/ContentSelectionStep.tsx

@@ -7,6 +7,7 @@ import { Upload, FileText } from 'lucide-react';
 const supportedContentTypes = [
   { mime: 'text/plain', label: 'Text', isText: true },
   { mime: 'application/json', label: 'JSON', isText: true },
+  { mime: 'text/html', label: 'HTML', isText: true },
   { mime: 'image/png', label: 'PNG Image', isText: false },
   { mime: 'image/jpeg', label: 'JPEG Image', isText: false },
   { mime: 'image/svg+xml', label: 'SVG Image', isText: false },

packages/ordinals-plus-explorer/src/components/inscription/ResourceInscriptionWizard.tsx

@@ -198,10 +198,17 @@ const ResourceInscriptionContext = createContext<ResourceInscriptionContextType
 // Create the provider component
 interface ResourceInscriptionProviderProps {
   children: ReactNode;
+  initialContentType?: string;
 }
 
-export const ResourceInscriptionProvider: React.FC<ResourceInscriptionProviderProps> = ({ children }) => {
-  const [state, dispatch] = useReducer(resourceInscriptionReducer, initialState);
+export const ResourceInscriptionProvider: React.FC<ResourceInscriptionProviderProps> = ({ children, initialContentType }) => {
+  const [state, dispatch] = useReducer(
+    resourceInscriptionReducer,
+    {
+      ...initialState,
+      contentData: { ...initialState.contentData, type: initialContentType ?? initialState.contentData.type }
+    }
+  );
   const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
   // Helper functions for common actions
@@ -390,12 +397,13 @@ const ErrorFallback: React.FC<{ error: Error; resetErrorBoundary: () => void }>
 // Main wizard container component
 interface ResourceInscriptionWizardProps {
   children: ReactNode;
+  initialContentType?: string;
 }
 
-const ResourceInscriptionWizard: React.FC<ResourceInscriptionWizardProps> = ({ children }) => {
+const ResourceInscriptionWizard: React.FC<ResourceInscriptionWizardProps> = ({ children, initialContentType }) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <ResourceInscriptionProvider>
+      <ResourceInscriptionProvider initialContentType={initialContentType}>
         <WizardLayout>
           {children}
         </WizardLayout>

packages/ordinals-plus-explorer/src/components/inscription/ResourceInscriptionWizardContainer.tsx

@@ -33,15 +33,19 @@ const WizardContent: React.FC = () => {
  * ResourceInscriptionWizardContainer is the main container component that integrates all the steps
  * of the resource inscription wizard into a cohesive flow.
  */
-const ResourceInscriptionWizardContainer: React.FC = () => {
+interface ResourceInscriptionWizardContainerProps {
+  initialContentType?: string;
+}
+
+const ResourceInscriptionWizardContainer: React.FC<ResourceInscriptionWizardContainerProps> = ({ initialContentType }) => {
   return (
     <div className="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
       <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
           Resource Inscription Wizard
         </h1>
 
-        <ResourceInscriptionWizard>
+        <ResourceInscriptionWizard initialContentType={initialContentType}>
           <WizardContent />
         </ResourceInscriptionWizard>
       </div>

packages/ordinals-plus-explorer/src/pages/CreateHtmlPage.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ResourceInscriptionWizardContainer from '../components/inscription/ResourceInscriptionWizardContainer';
+
+const CreateHtmlPage: React.FC = () => {
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
+          Create HTML Inscription
+        </h1>
+        <ResourceInscriptionWizardContainer initialContentType="text/html" />
+      </div>
+    </div>
+  );
+};
+
+export default CreateHtmlPage;

packages/ordinals-plus-explorer/tests/create-html-page.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import CreateHtmlPage from '../src/pages/CreateHtmlPage';
+
+describe('CreateHtmlPage', () => {
+  test('renders HTML inscription wizard with default content type', () => {
+    render(<CreateHtmlPage />);
+    expect(screen.getByText(/Create HTML Inscription/i)).toBeInTheDocument();
+    const select = screen.getByLabelText(/Content Type/i) as HTMLSelectElement;
+    expect(select.value).toBe('text/html');
+  });
+});