this.gui 1.3.40 → 1.3.41

package/dist/init/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "thisgui-demo",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^6.30.1",
+    "this.gui": "^1.2.18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.9.0",
+    "vite": "^6.0.0"
+  }
+}

package/dist/init/src/App.tsx

@@ -0,0 +1,40 @@
+//Include this.GUI components as a showviewcase
+import "./index.css";
+import { useState } from "react";
+export default function App() {
+  const defaultText = "Generation powered by AI.";
+  const [text, setText] = useState(defaultText);
+  const handleFocus = () => {
+    if (text === defaultText) setText("");
+  };
+  const handleBlur = () => {
+    if (text.trim() === "") setText(defaultText);
+  };
+
+  return (
+    <div style={{ textAlign: "center", padding: "2rem" }}>
+      <p style={{ textAlign: "center" }}>
+      <img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/v1760629119/this.gui.neurons.me_mkapde.png" alt=".GUI logo" width="244" />
+      </p>
+      <h1>.GUI</h1>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        style={{ 
+          textAlign: "center", 
+          border: "none", 
+          fontSize: "1.2rem", 
+          background: "transparent", 
+          outline: "none", 
+          width: "80%",
+          opacity: text === defaultText ? 0.4 : 1,
+          transition: "opacity 0.3s ease"
+        }}
+      />
+      <hr style={{ margin: "2rem auto", width: "60%" }} />
+    </div>
+  );
+}

package/dist/init/src/index.css

@@ -0,0 +1,16 @@
+:root {
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #1f2933;
+  background-color: #f5f7fb;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+.app-container {
+  max-width: 960px;
+  margin: 96px auto;
+  padding: 0 24px;
+}

package/dist/init/src/main.tsx

@@ -0,0 +1,13 @@
+// init/src/main.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { GuiProvider } from "this.gui";
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <GuiProvider>
+        <App />
+    </GuiProvider>
+  </React.StrictMode>
+);

package/dist/init/src/router/DerivableRouter.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
+type DerivableRouterContextType = {
+  currentPath: string;
+  navigate: (path: string) => void;
+};
+
+const DerivableRouterContext = createContext<DerivableRouterContextType | undefined>(undefined);
+export const DerivableRouterProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [currentPath, setCurrentPath] = useState<string>(location.pathname);
+  useEffect(() => {
+    setCurrentPath(location.pathname);
+  }, [location.pathname]);
+  return (
+    <DerivableRouterContext.Provider value={{ currentPath, navigate }}>
+      {children}
+    </DerivableRouterContext.Provider>
+  );
+};
+
+export const useDerivableRouter = (): DerivableRouterContextType => {
+  const ctx = useContext(DerivableRouterContext);
+  if (!ctx) {
+    throw new Error('useDerivableRouter must be used within a DerivableRouterProvider');
+  }
+  return ctx;
+};
+
+// Wrapper to ensure routing context
+export const DerivableRouterRoot: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <BrowserRouter>
+    <DerivableRouterProvider>{children}</DerivableRouterProvider>
+  </BrowserRouter>
+);

package/dist/init/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src"]
+}

package/dist/init/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "this.gui",
   "private": false,
-  "version": "1.3.40",
+  "version": "1.3.41",
   "type": "module",
   "main": "./dist/this.gui.cjs",
   "module": "./dist/this.gui.es.js",
@@ -28,8 +28,9 @@
     "gui": "./dist/bin/cli.js"
   },
   "scripts": {
-    "build": "vite build && npm run build:cli",
+    "build": "vite build && npm run build:cli && npm run build:copy-init",
     "build:cli": "tsc --project tsconfig.cli.json",
+    "build:copy-init": "node -e \"const fs=require('fs-extra'); if(!fs.existsSync('init')){throw new Error('init directory missing at project root');} fs.removeSync('dist/init'); fs.copySync('init','dist/init');\"",
     "pack:local": "npm run build && npm pack",
     "prepublishOnly": "npm run build",
     "dev": "vite",