Package library as @moduletrace/twui npm package

- Move components/ to src/ and compile to dist/ with tsc
- Add root barrel export plus deep-import subpath exports and base.css export
- Post-compile step: copy base.css, add .js import extensions, mark client modules
- Add publish.sh and .npmrc for the Gitea npm registry
- Fix type errors, guard TinyMCE env access, drop ace-builds type dependency
- Rename clashing props type names, remove Next.js scaffolding and unused deps

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/elements/Toggle.tsx

@@ -0,0 +1,77 @@
+import {
+    type DetailedHTMLProps,
+    type HTMLAttributes,
+    useEffect,
+    useState,
+} from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    circleProps?: DetailedHTMLProps<
+        HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+    default_active?: boolean;
+    changeHandler?: (checked: boolean) => void;
+};
+
+/**
+ * # Toggle Component
+ * @className_wrapper twui-toggle-wrapper
+ * @className_circle twui-toggle-circle
+ */
+export default function Toggle({
+    circleProps,
+    default_active,
+    changeHandler,
+    ...props
+}: TWUI_TOGGLE_PROPS) {
+    const [active, setActive] = useState(default_active || false);
+    const [ready, setReady] = useState(false);
+
+    useEffect(() => {
+        if (!ready) return;
+        changeHandler?.(active);
+    }, [active]);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setReady(true);
+        }, 200);
+    }, []);
+
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "flex flex-row items-center w-[40px] p-[3px] transition-all",
+                "border border-slate-300 dark:border-white/30 border-solid rounded-full",
+                active ? "justify-end" : "justify-start",
+                "twui-toggle-wrapper",
+                props.className,
+            )}
+            onClick={() => {
+                setActive(!active);
+            }}
+        >
+            {typeof active == "undefined" ? (
+                <div className="w-3.5 h-3.5 twui-toggle-circle"></div>
+            ) : (
+                <div
+                    {...circleProps}
+                    className={twMerge(
+                        "w-3.5 h-3.5 rounded-full ",
+                        active
+                            ? "bg-blue-600 dark:bg-blue-500"
+                            : "bg-slate-300 dark:bg-white/40",
+                        "twui-toggle-circle",
+                        circleProps?.className,
+                    )}
+                ></div>
+            )}
+        </div>
+    );
+}