@learnpack/learnpack 5.0.54 → 5.0.58

package/src/creator/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "creator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^7.16.0",
+    "@tailwindcss/vite": "^4.1.3",
+    "axios": "^1.8.4",
+    "front-matter": "^4.0.2",
+    "js-yaml": "^4.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.5.2",
+    "react-router": "^7.5.0",
+    "syllable": "^5.0.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.3",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/creator/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/creator/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/creator/src/App.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from "react"
+import StepWizard, { Step } from "./components/StepWizard"
+import SelectableCard from "./components/SelectableCard"
+import Loader from "./components/Loader"
+import { SVGS } from "./assets/svgs"
+import { useNavigate } from "react-router"
+import Login from "./components/Login"
+import { useShallow } from "zustand/react/shallow"
+import useStore from "./utils/store"
+import { interactiveCreation } from "./utils/rigo"
+import { parseLesson } from "./utils/lib"
+
+// import SyllabusEditor from "./components/SyllabusEditor"
+
+const exampleContentIndex = `-Introduction to AI: Explain what is AI and its applications
+-Introduction to Machine Learning: Explain What is machine learning and its aplications
+-What is an AI Model: Explain what is an AI model an its applications`
+
+function App() {
+  const navigate = useNavigate()
+
+  const { auth, formState, setFormState, setSyllabus } = useStore(
+    useShallow((state) => ({
+      auth: state.auth,
+      formState: state.formState,
+      setFormState: state.setFormState,
+      setSyllabus: state.setSyllabus,
+    }))
+  )
+
+  // const [currentStep, setCurrentStep] = useState(0)
+  const [steps, setSteps] = useState<Array<Step>>([
+    {
+      title: "Provide a description for your tutorial",
+      content: (
+        <textarea
+          placeholder="Describe your tutorial"
+          className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
+          defaultValue={formState.description}
+          onBlur={(e) => {
+            setFormState({
+              description: e.target.value,
+              currentStep: 1,
+            })
+          }}
+        />
+      ),
+    },
+    {
+      title:
+        "First you need to login with 4Geeks.com to use AI Generation tool for creators. ",
+      content: (
+        <Login
+          onFinish={() => {
+            setFormState({
+              currentStep: 2,
+            })
+          }}
+        />
+      ),
+    },
+    {
+      title: "What is the estimated duration for this tutorial?",
+      content: (
+        <div className="flex flex-row gap-4">
+          <SelectableCard
+            title="Around 30 minutes"
+            // subtitle="This is a tutorial that will take 30 minutes to complete"
+            onClick={() => {
+              setFormState({
+                duration: 30,
+                currentStep: 3,
+              })
+            }}
+            selected={false}
+          />
+          <SelectableCard
+            title="Around 1 hour"
+            // subtitle="This is a tutorial that will take 1 hour to complete"
+            onClick={() => {
+              setFormState({
+                duration: 60,
+                currentStep: 3,
+              })
+            }}
+            selected={false}
+          />
+          <SelectableCard
+            title="Around 2 hours"
+            // subtitle="This is a tutorial that will take 2 hours to complete"
+            onClick={() => {
+              setFormState({
+                duration: 120,
+                currentStep: 3,
+              })
+            }}
+            selected={false}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "What is the target audience for this tutorial?",
+      content: (
+        <div className="flex flex-row gap-4">
+          <textarea
+            placeholder="Describe the target audience for this tutorial"
+            className="w-full h-24 border-2 border-gray-300 rounded-md p-2 bg-white"
+            defaultValue={formState.targetAudience}
+            onBlur={(e) => {
+              setFormState({
+                targetAudience: e.target.value,
+                currentStep: 3,
+              })
+            }}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "Do you have a content index for this tutorial?",
+      content: (
+        <div className="flex flex-row gap-4 justify-center">
+          <SelectableCard
+            title="Yes"
+            onClick={() => {
+              setFormState({
+                hasContentIndex: true,
+                currentStep: 4,
+              })
+              setSteps([
+                ...steps,
+                {
+                  title:
+                    "Write or paste your content index below, each topic should be defined on a new line, here is an example:",
+                  content: (
+                    <textarea
+                      placeholder="Provide a content index for this tutorial"
+                      className="w-full h-24 border-2 border-gray-300 rounded-md p-2"
+                      defaultValue={exampleContentIndex}
+                      onBlur={(e) => {
+                        setFormState({
+                          contentIndex: e.target.value,
+                          isCompleted: true,
+                        })
+                      }}
+                    />
+                  ),
+                },
+              ])
+            }}
+            selected={false}
+          />
+          <SelectableCard
+            title="No, help me create one"
+            onClick={() => {
+              setFormState({
+                hasContentIndex: false,
+                isCompleted: true,
+              })
+
+              // createTutorial()
+              // setCurrentStep(4)
+            }}
+            selected={false}
+          />
+        </div>
+      ),
+    },
+  ])
+
+  useEffect(() => {
+    console.log(formState, "FORM STATE")
+    if (formState.isCompleted) {
+      // navigate("/syllabus")
+      handleCreateTutorial()
+    }
+  }, [formState])
+
+  const handleCreateTutorial = async () => {
+    const res = await interactiveCreation(auth.rigoToken, {
+      courseInfo: JSON.stringify(formState),
+      prevInteractions: "",
+    })
+    const lessons = res.parsed.listOfSteps.map((lesson: any) => {
+      return parseLesson(lesson)
+    })
+    setSyllabus({
+      lessons,
+      courseInfo: {
+        ...formState,
+        title: res.parsed.title,
+      },
+    })
+    navigate("/creator/syllabus")
+    setFormState({
+      description: "",
+      duration: 0,
+      targetAudience: "",
+      hasContentIndex: false,
+      contentIndex: "",
+      isCompleted: false,
+      currentStep: 0,
+    })
+  }
+
+  return (
+    <>
+      {formState.isCompleted ? (
+        <Loader
+          text="Learnpack is setting up your tutorial. It may take a moment..."
+          icon={SVGS.aiStars}
+        />
+      ) : (
+        <StepWizard initialStep={formState.currentStep} steps={steps} />
+      )}
+    </>
+  )
+}
+
+export default App

package/src/creator/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/creator/src/assets/svgs.tsx

@@ -0,0 +1,88 @@
+export const SVGS = {
+  aiStars: (
+    <svg
+      width="40"
+      height="41"
+      viewBox="0 0 40 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.95408 10.2252C1.45085 10.0311 0.927911 9.87841 0.388997 9.77098C0.34943 9.76312 0.309778 9.75548 0.270036 9.74806C-0.0900121 9.68103 -0.0900121 9.14217 0.270036 9.07514C0.309778 9.06773 0.34943 9.06009 0.388997 9.05223C0.927911 8.9448 1.45085 8.79209 1.95408 8.59799C2.25524 8.48181 2.54934 8.35086 2.83558 8.20585C4.81782 7.2019 6.42315 5.5269 7.3854 3.45863C7.52432 3.15997 7.64988 2.85312 7.76117 2.53888C7.94721 2.01381 8.09356 1.46818 8.19652 0.905878C8.20405 0.864594 8.21137 0.823222 8.21848 0.781755C8.28272 0.406082 8.79917 0.406082 8.86341 0.781755C8.87052 0.823222 8.87784 0.864594 8.88537 0.905878C8.98834 1.46818 9.13469 2.01381 9.32072 2.53888C9.43206 2.85311 9.55757 3.15997 9.69655 3.45863C10.6587 5.5269 12.2641 7.2019 14.2463 8.20585C14.5326 8.35086 14.8267 8.48181 15.1278 8.59799C15.6311 8.79209 16.154 8.9448 16.6929 9.05223C16.7325 9.06009 16.7721 9.06773 16.8119 9.07514C17.1719 9.14217 17.1719 9.68103 16.8119 9.74806C16.7721 9.75548 16.7325 9.76312 16.6929 9.77098C16.154 9.87841 15.6311 10.0311 15.1278 10.2252C14.8267 10.3414 14.5326 10.4723 14.2463 10.6174C12.2641 11.6213 10.6587 13.2963 9.69655 15.3646C9.55757 15.6633 9.43206 15.9701 9.32072 16.2843C9.13469 16.8094 8.98834 17.355 8.88537 17.9173C8.87784 17.9586 8.87052 18 8.86341 18.0414C8.79917 18.4171 8.28272 18.4171 8.21848 18.0414C8.21137 18 8.20405 17.9586 8.19652 17.9173C8.09356 17.355 7.94721 16.8094 7.76117 16.2843C7.64988 15.9701 7.52432 15.6633 7.3854 15.3646C6.42315 13.2963 4.81782 11.6213 2.83558 10.6174C2.54934 10.4723 2.25524 10.3414 1.95408 10.2252ZM13.9852 23.5745C13.6332 23.4755 13.2764 23.3887 12.9151 23.3144C12.8586 23.3029 12.802 23.2916 12.7454 23.2806L12.7282 23.2772L12.7049 23.2728C12.6692 23.266 12.6299 23.2587 12.5514 23.244L12.524 23.2389C11.9482 23.1252 11.9482 22.2649 12.524 22.1512L12.5514 22.1461C12.6299 22.1315 12.6692 22.1242 12.7049 22.1174L12.7282 22.1129L12.7454 22.1096C12.802 22.0986 12.8586 22.0873 12.915 22.0757C13.2763 22.0015 13.6332 21.9146 13.9852 21.8157C14.2858 21.7311 14.5829 21.6377 14.8761 21.5358C19.6203 19.8857 23.3535 15.9905 24.935 11.0404C25.0327 10.7344 25.1222 10.4245 25.2032 10.1108C25.2981 9.74358 25.3813 9.3712 25.4525 8.99417C25.4636 8.93528 25.4744 8.87628 25.485 8.81717L25.4881 8.79923L25.4924 8.77499C25.4989 8.73813 25.5058 8.69767 25.5195 8.61758L25.52 8.61481L25.5248 8.5862C25.6338 7.9854 26.4583 7.9854 26.5673 8.5862L26.5722 8.61481C26.5862 8.69673 26.5932 8.73769 26.5998 8.77499L26.604 8.79923L26.6072 8.81717C26.6177 8.87628 26.6286 8.93528 26.6397 8.99417C26.7108 9.37125 26.7941 9.74358 26.8889 10.1108C26.9699 10.4245 27.0595 10.7344 27.1572 11.0404C28.7386 15.9905 32.4718 19.8857 37.216 21.5358C37.5093 21.6377 37.8063 21.7311 38.107 21.8157C38.4589 21.9146 38.8158 22.0015 39.1771 22.0757C39.2336 22.0873 39.2901 22.0986 39.3468 22.1096L39.364 22.1129L39.3872 22.1174C39.423 22.1242 39.4622 22.1315 39.5407 22.1461L39.5681 22.1512C40.144 22.2649 40.144 23.1252 39.5681 23.2389L39.5407 23.244L39.4576 23.2595L39.3872 23.2728L39.364 23.2772L39.3468 23.2806C39.2901 23.2916 39.2336 23.3029 39.1771 23.3144C38.8158 23.3887 38.4589 23.4755 38.107 23.5745C37.8063 23.659 37.5093 23.7524 37.216 23.8544C32.4718 25.5045 28.7386 29.3997 27.1572 34.3498C27.0595 34.6558 26.9699 34.9657 26.8889 35.2794C26.7941 35.6466 26.7108 36.019 26.6397 36.396C26.6286 36.4549 26.6177 36.5139 26.6072 36.573L26.604 36.5909L26.5998 36.6152L26.5903 36.6698L26.5728 36.7722L26.5673 36.804C26.4583 37.4048 25.6338 37.4048 25.5248 36.804L25.52 36.7754C25.506 36.6936 25.4989 36.6524 25.4924 36.6152L25.4881 36.5909L25.485 36.573C25.4744 36.5139 25.4636 36.4549 25.4525 36.396C25.3813 36.0189 25.2981 35.6466 25.2032 35.2794C25.1222 34.9657 25.0327 34.6558 24.935 34.3498C23.3535 29.3997 19.6203 25.5045 14.8761 23.8544C14.5829 23.7524 14.2858 23.659 13.9852 23.5745ZM6.04466 35.0986C6.64986 35.2192 7.22313 35.4303 7.75125 35.7179C7.98619 35.8459 8.21217 35.989 8.42801 36.146C9.0295 36.5836 9.55248 37.1293 9.97186 37.7568C10.1223 37.9821 10.2595 38.2179 10.3821 38.463C10.6578 39.014 10.8601 39.6122 10.9757 40.2437C10.9805 40.2697 10.9851 40.2959 10.9896 40.322C11.0302 40.5593 11.3564 40.5593 11.3969 40.322C11.4014 40.2959 11.406 40.2697 11.4108 40.2437C11.5264 39.6122 11.7287 39.014 12.0044 38.463C12.127 38.2179 12.2642 37.9821 12.4147 37.7568C12.834 37.1293 13.357 36.5836 13.9585 36.146C14.1744 35.989 14.4003 35.8459 14.6352 35.7179C15.1634 35.4303 15.7367 35.2192 16.3419 35.0986C16.3669 35.0936 16.3919 35.0888 16.417 35.0841C16.6444 35.0418 16.6444 34.7014 16.417 34.6591C16.3919 34.6544 16.3669 34.6496 16.3419 34.6446C15.7367 34.524 15.1634 34.3129 14.6352 34.0253C14.4003 33.8973 14.1744 33.7542 13.9585 33.5972C13.357 33.1596 12.834 32.6139 12.4147 31.9864C12.2642 31.7611 12.127 31.5253 12.0044 31.2803C11.7287 30.7292 11.5264 30.131 11.4108 29.4995C11.406 29.4735 11.4014 29.4474 11.3969 29.4212C11.3564 29.1839 11.0302 29.1839 10.9896 29.4212C10.9851 29.4474 10.9805 29.4735 10.9757 29.4995C10.8601 30.131 10.6578 30.7292 10.3821 31.2803C10.2595 31.5253 10.1223 31.7611 9.97186 31.9864C9.55248 32.6139 9.0295 33.1596 8.42801 33.5972C8.21217 33.7542 7.98619 33.8973 7.75125 34.0253C7.22313 34.3129 6.64986 34.524 6.04466 34.6446C6.01968 34.6496 5.99464 34.6544 5.9695 34.6591C5.74214 34.7014 5.74214 35.0418 5.9695 35.0841C5.99464 35.0888 6.01968 35.0936 6.04466 35.0986Z"
+        fill="#02A9EA"
+      />
+    </svg>
+  ),
+  pen: (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 11.0829V14H2.91707L11.5244 5.39269L8.60731 2.47562L0 11.0829ZM13.7725 3.1446C14.0758 2.84123 14.0758 2.34727 13.7725 2.0439L11.9561 0.227532C11.6527 -0.0758439 11.1588 -0.0758439 10.8554 0.227532L9.43187 1.65106L12.3489 4.56813L13.7725 3.1446Z"
+        fill="#3A3A3A"
+      />
+    </svg>
+  ),
+  trash: (
+    <svg
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.8368 5.39163C13.1297 5.44167 13.3254 5.71297 13.2739 5.99759L11.8416 13.9136C11.8416 13.9136 11.8416 13.9136 11.8416 13.9136C11.6757 14.831 10.8556 15.5 9.89714 15.5H4.10289C3.14437 15.5 2.32434 14.831 2.15836 13.9136L0.726084 5.99759C0.674586 5.71297 0.870274 5.44167 1.16317 5.39163C1.45606 5.34158 1.73524 5.53174 1.78674 5.81637L3.21902 13.7324C3.29447 14.1494 3.66722 14.4535 4.10289 14.4535H9.89714C10.3328 14.4535 10.7055 14.1494 10.781 13.7324L12.2133 5.81636C12.2648 5.53174 12.5439 5.34158 12.8368 5.39163Z"
+        fill="#EB5757"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.01282 1.54651C5.51718 1.54651 5.11538 1.93696 5.11538 2.4186V3.2907H8.88462V2.4186C8.88462 1.93696 8.48284 1.54651 7.98718 1.54651H6.01282ZM4.03846 3.2907V2.4186C4.03846 1.35899 4.92241 0.5 6.01282 0.5H7.98718C9.07761 0.5 9.96154 1.35899 9.96154 2.4186V3.2907H13.4615C13.7589 3.2907 14 3.52497 14 3.81395C14 4.10294 13.7589 4.33721 13.4615 4.33721H0.538462C0.241077 4.33721 0 4.10294 0 3.81395C0 3.52497 0.241077 3.2907 0.538462 3.2907H4.03846Z"
+        fill="#EB5757"
+      />
+    </svg>
+  ),
+  github: (
+    <svg
+      width="20px"
+      height="20px"
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>github [#142]</title>
+      <desc>Created with Sketch.</desc>
+      <defs></defs>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          id="Dribbble-Light-Preview"
+          transform="translate(-140.000000, -7559.000000)"
+          fill="#000000"
+        >
+          <g id="icons" transform="translate(56.000000, 160.000000)">
+            <path
+              d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"
+              id="github-[#142]"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  ),
+}

package/src/creator/src/components/Loader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface LoaderProps {
+  text: string;
+  icon?: React.ReactNode;
+}
+
+const Loader: React.FC<LoaderProps> = ({ text, icon }) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 text-center space-y-6">
+      <div className="text-blue-500 text-4xl animate-pulse">
+        {icon}
+      </div>
+      <p className="text-gray-800 text-lg whitespace-pre-line">{text}</p>
+      <div className="flex space-x-2 mt-2">
+        {[0, 1, 2, 3].map((i) => (
+          <span
+            key={i}
+            className="w-2 h-2 rounded-full bg-blue-400 opacity-30 animate-ping"
+            style={{ animationDelay: `${i * 0.2}s`, animationDuration: '1.2s' }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Loader;