@geenius/tools 0.1.0

package/packages/devtools/react/src/services/github-service.ts

@@ -0,0 +1,247 @@
+// @geenius-tools/devtools-react — src/services/github-service.ts
+// GitHub API service for creating issues — adapted from geenius-react
+
+export interface GitHubIssue {
+    title: string
+    body: string
+    labels?: string[]
+}
+
+export interface GitHubLabel {
+    id: number
+    name: string
+    color: string
+    description: string | null
+}
+
+export interface CreateIssueResponse {
+    id: number
+    number: number
+    html_url: string
+    title: string
+}
+
+export interface GitHubIssueListItem {
+    id: number
+    number: number
+    title: string
+    body: string | null
+    html_url: string
+    state: 'open' | 'closed'
+    created_at: string
+    updated_at: string
+    labels: GitHubLabel[]
+    user: {
+        login: string
+        avatar_url: string
+    } | null
+}
+
+export type IssueFilter = 'all' | 'bug' | 'enhancement'
+
+/**
+ * GitHub configuration. Provide via `configureGitHub()` or env vars.
+ */
+export interface GitHubConfig {
+    owner: string
+    repo: string
+    branch?: string
+    token: string
+}
+
+let _config: GitHubConfig | null = null
+
+/**
+ * Configure GitHub integration.
+ *
+ * @example
+ * ```ts
+ * configureGitHub({
+ *   owner: 'my-org',
+ *   repo: 'my-app',
+ *   token: import.meta.env.VITE_GITHUB_TOKEN,
+ * })
+ * ```
+ */
+export function configureGitHub(config: GitHubConfig): void {
+    _config = config
+}
+
+export function getGitHubConfig(): GitHubConfig {
+    if (_config) return _config
+
+    // Fallback: try env vars (Vite convention)
+    let owner = ''
+    let repo = ''
+    let branch = 'main'
+    let token = ''
+    try {
+        // @ts-expect-error — Vite env
+        owner = import.meta?.env?.VITE_GITHUB_OWNER ?? ''
+        // @ts-expect-error — Vite env
+        repo = import.meta?.env?.VITE_GITHUB_REPO ?? ''
+        // @ts-expect-error — Vite env
+        branch = import.meta?.env?.VITE_GITHUB_BRANCH ?? 'main'
+        // @ts-expect-error — Vite env
+        token = import.meta?.env?.VITE_GITHUB_TOKEN ?? ''
+    } catch {
+        // Not in Vite
+    }
+
+    return { owner, repo, branch, token }
+}
+
+export function isGitHubConfigured(): boolean {
+    const { owner, repo, token } = getGitHubConfig()
+    const isPlaceholder =
+        !token || token === 'ghp_your_personal_access_token_here'
+    return Boolean(owner && repo && token && !isPlaceholder)
+}
+
+export async function createGitHubIssue(
+    issue: GitHubIssue,
+): Promise<CreateIssueResponse> {
+    const { owner, repo, token } = getGitHubConfig()
+
+    if (!owner || !repo || !token) {
+        throw new Error(
+            'GitHub configuration is incomplete. Call configureGitHub() or set VITE_GITHUB_* env vars.',
+        )
+    }
+
+    const response = await fetch(
+        `https://api.github.com/repos/${owner}/${repo}/issues`,
+        {
+            method: 'POST',
+            headers: {
+                Accept: 'application/vnd.github+json',
+                Authorization: `Bearer ${token}`,
+                'X-GitHub-Api-Version': '2022-11-28',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                title: issue.title,
+                body: issue.body,
+                labels: issue.labels || [],
+            }),
+        },
+    )
+
+    if (!response.ok) {
+        const error = await response
+            .json()
+            .catch(() => ({ message: 'Unknown error' }))
+        throw new Error(
+            `Failed to create issue: ${error.message || response.statusText}`,
+        )
+    }
+
+    return response.json()
+}
+
+export async function getRepositoryLabels(): Promise<GitHubLabel[]> {
+    const { owner, repo, token } = getGitHubConfig()
+
+    if (!owner || !repo || !token) return []
+
+    try {
+        const response = await fetch(
+            `https://api.github.com/repos/${owner}/${repo}/labels`,
+            {
+                headers: {
+                    Accept: 'application/vnd.github+json',
+                    Authorization: `Bearer ${token}`,
+                    'X-GitHub-Api-Version': '2022-11-28',
+                },
+            },
+        )
+
+        if (!response.ok) return []
+        return response.json()
+    } catch {
+        return []
+    }
+}
+
+export async function getGitHubIssues(
+    filter: IssueFilter = 'all',
+    state: 'open' | 'closed' | 'all' = 'open',
+): Promise<GitHubIssueListItem[]> {
+    const { owner, repo, token } = getGitHubConfig()
+
+    if (!owner || !repo || !token) return []
+
+    try {
+        const params = new URLSearchParams({
+            state,
+            per_page: '50',
+            sort: 'updated',
+            direction: 'desc',
+        })
+
+        if (filter !== 'all') {
+            params.set('labels', filter)
+        }
+
+        const response = await fetch(
+            `https://api.github.com/repos/${owner}/${repo}/issues?${params.toString()}`,
+            {
+                headers: {
+                    Accept: 'application/vnd.github+json',
+                    Authorization: `Bearer ${token}`,
+                    'X-GitHub-Api-Version': '2022-11-28',
+                },
+            },
+        )
+
+        if (!response.ok) return []
+
+        const issues: GitHubIssueListItem[] = await response.json()
+        return issues.filter((issue) => !('pull_request' in issue))
+    } catch {
+        return []
+    }
+}
+
+export function generateContextInfo(): string {
+    const lines: string[] = [
+        '---',
+        '### Context',
+        '',
+        `**Page URL:** ${window.location.href}`,
+        `**Timestamp:** ${new Date().toISOString()}`,
+        `**User Agent:** ${navigator.userAgent}`,
+        `**Branch:** ${getGitHubConfig().branch ?? 'main'}`,
+    ]
+
+    if (typeof window !== 'undefined') {
+        lines.push(`**Screen:** ${window.innerWidth}x${window.innerHeight}`)
+    }
+
+    return lines.join('\n')
+}
+
+export function getIssueType(
+    issue: GitHubIssueListItem,
+): 'bug' | 'feature' | 'other' {
+    const labelNames = issue.labels.map((l) => l.name.toLowerCase())
+    if (labelNames.includes('bug')) return 'bug'
+    if (labelNames.includes('enhancement') || labelNames.includes('feature'))
+        return 'feature'
+    return 'other'
+}
+
+export function formatRelativeTime(dateString: string): string {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMs / 3600000)
+    const diffDays = Math.floor(diffMs / 86400000)
+
+    if (diffMins < 1) return 'just now'
+    if (diffMins < 60) return `${diffMins}m ago`
+    if (diffHours < 24) return `${diffHours}h ago`
+    if (diffDays < 7) return `${diffDays}d ago`
+    return date.toLocaleDateString()
+}

package/packages/devtools/react/tsconfig.json

@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "jsx": "react-jsx",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist",
+        "rootDir": "./src"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

package/packages/devtools/react/tsup.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: { index: 'src/index.ts' },
+    outDir: 'dist',
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: [
+        'react',
+        'react-dom',
+        '@geenius-ui/react',
+        '@geenius-tools/logger',
+        'lucide-react',
+    ],
+})

package/packages/devtools/solidjs/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-tools/devtools-solidjs\n\n> SolidJS dev-tools UI — floating toolbar, performance panel, inspector, GitHub issues\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-tools/devtools-solidjs\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-tools/devtools-solidjs';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/devtools/solidjs/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@geenius-tools/devtools-solidjs",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "SolidJS dev-tools UI — floating toolbar, performance panel, inspector, GitHub issues",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "pnpm clean && pnpm build"
+  },
+  "dependencies": {
+    "@geenius-tools/logger": "workspace:*"
+  },
+  "devDependencies": {
+    "@geenius-ui/solid": "workspace:*",
+    "lucide-solid": "^0.577.0",
+    "solid-js": "^1.9.0",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "@geenius-ui/solid": "workspace:*",
+    "lucide-solid": ">=0.300.0",
+    "solid-js": "^1.8.0 || ^1.9.0"
+  },
+  "author": "Antigravity HQ",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/devtools/solidjs/src/components/DesignPreview.tsx

@@ -0,0 +1,51 @@
+// @geenius-tools/devtools-solidjs — components/DesignPreview.tsx
+import { createEffect, onMount } from 'solid-js'
+import type { Design } from '../data/designs'
+
+export type DesignPreviewProps = {
+    designNumber: number
+    showGrid?: boolean
+    theme?: 'light' | 'dark'
+}
+
+/**
+ * DesignPreview — renders an HTML design file in an iframe with grid overlay + theme control.
+ *
+ * Uses Tailwind CSS utility classes.
+ */
+export function DesignPreview(props: DesignPreviewProps) {
+    let iframeRef: HTMLIFrameElement | undefined
+
+    const applyTheme = () => {
+        try {
+            if (iframeRef?.contentDocument) {
+                const action = (props.theme ?? 'light') === 'dark' ? 'add' : 'remove'
+                iframeRef.contentDocument.documentElement.classList[action]('dark')
+                iframeRef.contentDocument.body?.classList[action]('dark')
+            }
+        } catch {
+            // Cross-origin restrictions
+        }
+    }
+
+    createEffect(applyTheme)
+
+    return (
+        <div class="relative w-full h-screen">
+            {(props.showGrid ?? false) && (
+                <div class="absolute inset-0 pointer-events-none z-[100] flex justify-between px-4 max-w-[1400px] mx-auto w-full">
+                    {Array.from({ length: 12 }).map((_, i) => (
+                        <div class="h-full w-[calc(100%/12)] border-x border-red-500/20 bg-red-500/5 mx-2" />
+                    ))}
+                </div>
+            )}
+            <iframe
+                ref={iframeRef}
+                src={`/designs/design-${props.designNumber}.html`}
+                class="w-full h-full border-0"
+                title={`Design ${props.designNumber} Preview`}
+                onLoad={applyTheme}
+            />
+        </div>
+    )
+}

package/packages/devtools/solidjs/src/components/DesignSwitcherDropdown.tsx

@@ -0,0 +1,95 @@
+// @geenius-tools/devtools-solidjs — components/DesignSwitcherDropdown.tsx
+import { createSignal, createEffect, onCleanup } from 'solid-js'
+import { For, Show } from 'solid-js/web'
+
+export type DesignSwitcherDropdownProps = {
+    /** Current active path — used to highlight the active design */
+    currentPath: string
+    /** Called when user selects a design */
+    onNavigate: (path: string) => void
+    /** Total number of designs */
+    designCount?: number
+}
+
+/**
+ * DesignSwitcherDropdown — dropdown menu for switching between design previews.
+ *
+ * Router-agnostic: caller provides currentPath and onNavigate.
+ * Uses Tailwind CSS utility classes.
+ */
+export function DesignSwitcherDropdown(props: DesignSwitcherDropdownProps) {
+    const [isOpen, setIsOpen] = createSignal(false)
+    let dropdownRef: HTMLDivElement | undefined
+
+    const getCurrentDesign = () => {
+        const match = props.currentPath.match(/\/dev\/design\/(\d+)/)
+        return match ? `Design ${match[1]}` : 'Current Design'
+    }
+
+    createEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
+                setIsOpen(false)
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside)
+        onCleanup(() => document.removeEventListener('mousedown', handleClickOutside))
+    })
+
+    const handleDesignChange = (path: string) => {
+        props.onNavigate(path)
+        setIsOpen(false)
+    }
+
+    const designs = () => [
+        { label: 'Current Design', path: '/' },
+        ...Array.from({ length: props.designCount ?? 21 }, (_, i) => ({
+            label: `Design ${i + 1}`,
+            path: `/dev/design/${i + 1}`,
+        })),
+    ]
+
+    return (
+        <div ref={dropdownRef} class="relative">
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen())}
+                aria-label="Switch Design"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-foreground hover:bg-bg-muted transition-colors text-sm font-medium"
+            >
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width={2}><circle cx="13.5" cy="6.5" r="0.5" /><circle cx="17.5" cy="10.5" r="0.5" /><circle cx="8.5" cy="7.5" r="0.5" /><circle cx="6.5" cy="12" r="0.5" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg>
+                <span class="hidden sm:inline">{getCurrentDesign()}</span>
+                <svg
+                    class={`w-4 h-4 transition-transform duration-200 ${isOpen() ? 'rotate-180' : ''}`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M19 9l-7 7-7-7" />
+                </svg>
+            </button>
+
+            <Show when={isOpen()}>
+                <div class="absolute right-0 mt-2 py-2 bg-card border border-border rounded-lg shadow-xl overflow-hidden min-w-[180px] max-h-[400px] overflow-y-auto z-50">
+                    <For each={designs()}>
+                        {(design) => (
+                            <button
+                                type="button"
+                                onClick={() => handleDesignChange(design.path)}
+                                class={`w-full px-4 py-2.5 text-left text-sm transition-colors ${getCurrentDesign() === design.label
+                                    ? 'bg-primary/10 text-primary font-medium'
+                                    : 'hover:bg-bg-muted text-foreground'
+                                    }`}
+                            >
+                                {design.label}
+                                <Show when={getCurrentDesign() === design.label}>
+                                    <span class="ml-2 text-primary">✓</span>
+                                </Show>
+                            </button>
+                        )}
+                    </For>
+                </div>
+            </Show>
+        </div>
+    )
+}