@gblikas/querykit 0.0.0

package/dist/translators/types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * QueryKit Translator Types
+ *
+ * These are the core interfaces for translators, which convert QueryKit's
+ * internal AST representation into formats that specific data sources can understand.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/examples/qk-next/README.md

@@ -0,0 +1,35 @@
+### QueryKit Demo (Next.js)
+
+This is the demo website for QueryKit. It showcases the QueryKit DSL running in the browser, translating human-friendly filters to Drizzle/SQL and querying an in-browser Postgres (PGlite).
+
+For full docs, API, and examples, visit the QueryKit repository: [github.com/gblikas/querykit](https://github.com/gblikas/querykit)
+
+### Quick start
+
+```bash
+cd examples/qk-next
+pnpm dev
+```
+
+Open http://localhost:3000.
+
+### Build and run
+
+```bash
+cd examples/qk-next
+pnpm build
+pnpm start
+```
+
+### Optional environment
+
+- Set `NEXT_PUBLIC_SITE_URL` to your site URL to improve canonical metadata.
+
+### Tech
+
+- Next.js App Router
+- QueryKit (DSL → Drizzle/SQL)
+- Drizzle ORM + PGlite (in-browser Postgres)
+- Tailwind CSS
+
+License: See the repository root for licensing information.

package/examples/qk-next/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/examples/qk-next/app/layout.tsx

@@ -0,0 +1,121 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import { Toaster } from '@/components/ui/sonner';
+import { Providers } from '@/app/providers';
+import { ThemeProvider } from '@/components/theme-provider';
+import { GitHubStars } from '@/components/github-stars';
+import AuroraBackground from '@/components/aurora-background';
+import { JSX } from 'react';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin']
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin']
+});
+
+export const metadata: Metadata = {
+  metadataBase: new URL(
+    process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+  ),
+  title: {
+    default: 'QueryKit · Next.js Demo',
+    template: '%s · QueryKit'
+  },
+  applicationName: 'QueryKit',
+  description:
+    'Interactive demo for QueryKit — a type-safe DSL that translates human-friendly filters into Drizzle/SQL for both server and client.',
+  keywords: [
+    'QueryKit',
+    'query dsl',
+    'filter language',
+    'sql translation',
+    'drizzle orm',
+    'pglite',
+    'typescript',
+    'next.js'
+  ],
+  authors: [{ name: 'gblikas', url: 'https://github.com/gblikas' }],
+  creator: 'QueryKit',
+  publisher: 'QueryKit',
+  category: 'software',
+  generator: 'Next.js',
+  referrer: 'origin-when-cross-origin',
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false
+  },
+  openGraph: {
+    title: 'QueryKit · Next.js Demo',
+    description:
+      'Filter tasks using the QueryKit DSL and inspect the generated SQL and EXPLAIN ANALYZE.',
+    url: '/',
+    siteName: 'QueryKit',
+    locale: 'en_US',
+    type: 'website'
+  },
+  twitter: {
+    card: 'summary',
+    title: 'QueryKit · Next.js Demo',
+    description:
+      'Filter tasks using the QueryKit DSL and inspect the generated SQL and EXPLAIN ANALYZE.',
+    creator: '@querykit'
+  },
+  robots: {
+    index: true,
+    follow: true
+  },
+  alternates: {
+    canonical: '/'
+  },
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#0B0B0E' },
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' }
+  ]
+};
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <html lang="en" suppressHydrationWarning className="min-h-screen">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          disableTransitionOnChange
+        >
+          <div className="relative min-h-screen">
+            {/* Global Aurora background behind header and content */}
+            <div className="fixed inset-0 -z-10 pointer-events-none">
+              <AuroraBackground />
+            </div>
+            <div className="fixed top-3 right-3 z-40">
+              <a
+                href="https://github.com/gblikas/querykit"
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-xs hover:bg-accent transition-colors"
+                aria-label="GitHub stars"
+              >
+                <GitHubStars />
+              </a>
+            </div>
+            <Providers>{children}</Providers>
+            <Toaster />
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}