deployment 2025-03-17

src/app/api/events/route.ts

@@ -5,7 +5,7 @@
 // All recorded data will be stored in the Starbase Database.
 
 import { headers } from "next/headers";
-import { after, NextRequest, NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import zod from "zod";
 import { insertTrackingRecord } from "./insert-tracking-record";
 
@@ -55,11 +55,7 @@ export const POST = async (req: NextRequest) => {
   }
 
   // Save the event
-  after(() => {
-    insertTrackingRecord(deviceId, validate.data.events.slice(0, 50))
-      .then()
-      .catch();
-  });
+  await insertTrackingRecord(deviceId, validate.data.events.slice(0, 50));
 
   return NextResponse.json(
     {

src/components/board/board-chart-editor.tsx

@@ -12,7 +12,7 @@ import { ChartValue } from "../chart/chart-type";
 import EditChartMenu from "../chart/edit-chart-menu";
 import ResultTable from "../gui/query-result-table";
 import SqlEditor from "../gui/sql-editor";
-import OptimizeTableState from "../gui/table-optimized/OptimizeTableState";
+import OptimizeTableState from "../gui/table-optimized/optimize-table-state";
 import { Button } from "../orbit/button";
 import { MenuBar } from "../orbit/menu-bar";
 import { createAutoBoardChartValue } from "./board-auto-value";

src/components/gui/aggregate-result/aggregate-result-button.tsx

@@ -1,11 +1,11 @@
+import { LucideCheck, LucideChevronDown } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { buttonVariants } from "../../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import ListButtonItem from "../list-button-item";
 import OptimizeTableState, {
   AggregateFunction,
-} from "../table-optimized/OptimizeTableState";
-import { useCallback, useEffect, useState } from "react";
-import ListButtonItem from "../list-button-item";
-import { LucideCheck, LucideChevronDown } from "lucide-react";
+} from "../table-optimized/optimize-table-state";
 export interface AggregateResult {
   sum: number | string | undefined;
   avg: number | string | undefined;
@@ -74,7 +74,7 @@ export default function AggregateResultButton({
       <PopoverTrigger>
         <div className={buttonVariants({ variant: "ghost", size: "sm" })}>
           {displayResult}{" "}
-          {!!displayResult && <LucideChevronDown className="w-4 h-4 ml-2" />}
+          {!!displayResult && <LucideChevronDown className="ml-2 h-4 w-4" />}
         </div>
       </PopoverTrigger>
       <PopoverContent className="p-0">

src/components/gui/export/export-result-button.tsx

@@ -14,7 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
 import OptimizeTableState, {
   TableSelectionRange,
-} from "../table-optimized/OptimizeTableState";
+} from "../table-optimized/optimize-table-state";
 
 export type ExportTarget = "clipboard" | "file";
 type ExportFormat = "csv" | "delimited" | "json" | "sql" | "xlsx";

src/components/gui/query-result-table.tsx

@@ -1,7 +1,7 @@
 import OptimizeTable, {
   OptimizeTableHeaderWithIndexProps,
 } from "@/components/gui/table-optimized";
-import OptimizeTableState from "@/components/gui/table-optimized/OptimizeTableState";
+import OptimizeTableState from "@/components/gui/table-optimized/optimize-table-state";
 import { useStudioContext } from "@/context/driver-provider";
 import { ColumnSortOption } from "@/drivers/base-driver";
 import { exportDataAsDelimitedText } from "@/lib/export-helper";

src/components/gui/table-cell/create-editable-cell.tsx

@@ -1,11 +1,11 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import GenericCell from "./generic-cell";
 import { DatabaseValue } from "@/drivers/base-driver";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
-import { useFullEditor } from "../providers/full-editor-provider";
-import { OptimizeTableHeaderWithIndexProps } from "../table-optimized";
 import { cn } from "@/lib/utils";
 import { ColumnType } from "@outerbase/sdk-transform";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useFullEditor } from "../providers/full-editor-provider";
+import { OptimizeTableHeaderWithIndexProps } from "../table-optimized";
+import OptimizeTableState from "../table-optimized/optimize-table-state";
+import GenericCell from "./generic-cell";
 
 export interface TableEditableCell<T = unknown> {
   value: DatabaseValue<T>;
@@ -92,8 +92,8 @@ function InputCellEditor({
       type="text"
       className={
         align === "right"
-          ? "h-full w-full border-0 bg-inherit pl-2 pr-2 text-right font-mono outline-hidden"
-          : "h-full w-full border-0 bg-inherit pl-2 pr-2 font-mono outline-hidden"
+          ? "h-full w-full border-0 bg-inherit pr-2 pl-2 text-right font-mono outline-hidden"
+          : "h-full w-full border-0 bg-inherit pr-2 pl-2 font-mono outline-hidden"
       }
       value={value ?? ""}
     />

src/components/gui/table-optimized/index.tsx

@@ -12,12 +12,12 @@ import React, {
   useRef,
   useState,
 } from "react";
-import OptimizeTableState from "./OptimizeTableState";
+import OptimizeTableState from "./optimize-table-state";
 import OptimizeTableCell from "./table-cell";
 import TableFakeBodyPadding from "./table-fake-body-padding";
 import TableFakeRowPadding from "./table-fake-row-padding";
 import TableHeaderList from "./table-header-list";
-import useTableVisibilityRecalculation from "./useTableVisibilityRecalculation";
+import useTableVisibilityRecalculation from "./use-visibility-calculation";
 
 export type TableCellDecorator = (value: unknown) => ReactElement | null;
 
@@ -138,7 +138,7 @@ function renderCellList({
     headers.map((header) => headerSizes[header.index] + "px").join(" ");
 
   const onHeaderSizeWithRemap = (idx: number, newWidth: number) => {
-    onHeaderResize(headerSizes[headers[idx]?.index ?? 0] ?? 150, newWidth);
+    onHeaderResize(headers[idx]?.index ?? 0, newWidth);
   };
 
   const windowArray = new Array(rowEnd - rowStart)

src/components/gui/table-optimized/OptimizeTableState.tsx → src/components/gui/table-optimized/optimize-table-state.tsx

@@ -495,7 +495,7 @@ export default class OptimizeTableState {
   }
 
   setHeaderWidth(idx: number, newWidth: number) {
-    return (this.headerWidth[idx] = newWidth);
+    this.headerWidth[idx] = newWidth;
   }
 
   getHeaderWidth() {

src/components/gui/table-optimized/table-cell.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 import { useMemo } from "react";
 import { OptimizeTableHeaderWithIndexProps } from ".";
 import tableResultCellRenderer from "../table-result/render-cell";
-import OptimizeTableState from "./OptimizeTableState";
+import OptimizeTableState from "./optimize-table-state";
 
 export default function OptimizeTableCell({
   state,
@@ -53,7 +53,8 @@ export default function OptimizeTableCell({
     isSelected && "border-neutral-950 dark:border-neutral-50",
     isBorderBottom && "border-b border-b-neutral-950 dark:border-b-neutral-50",
     isBorderRight && "border-r border-r-neutral-950 dark:border-r-neutral-50",
-    isFocus && "shadow-[0_0_0_1px_rgba(0,0,0,0.5)_inset] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.5)_inset]",
+    isFocus &&
+      "shadow-[0_0_0_1px_rgba(0,0,0,0.5)_inset] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.5)_inset]",
     isSticky && "sticky",
     cellBackgroundColor
   );

src/components/gui/table-optimized/table-header-list.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { OptimizeTableHeaderWithIndexProps } from ".";
-import OptimizeTableState from "./OptimizeTableState";
+import OptimizeTableState from "./optimize-table-state";
 import TableHeader from "./table-header";
 
 export default function TableHeaderList({
@@ -28,9 +28,7 @@ export default function TableHeaderList({
     <thead>
       <tr>
         <th className="sticky left-0 z-30 bg-neutral-50 dark:bg-neutral-950">
-          <div className="libsql-table-cell flex h-full items-center justify-end pr-2 font-mono font-bold">
-
-          </div>
+          <div className="libsql-table-cell flex h-full items-center justify-end pr-2 font-mono font-bold"></div>
         </th>
         {headers.map((header, idx) => {
           return (

src/components/gui/table-optimized/table-header-resize-handler.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function TableHeaderResizeHandler({
   idx,
@@ -58,7 +58,7 @@ export default function TableHeaderResizeHandler({
               tableWrapper.scrollLeft += gain;
             }
 
-            onResize(idx, width);
+            onResize(idx - 1, width);
 
             if (table) {
               const columns = table.style.gridTemplateColumns.split(" ");

src/components/gui/table-optimized/table-header.tsx

@@ -1,8 +1,8 @@
+import { cn } from "@/lib/utils";
 import React, { type ReactElement } from "react";
 import type { OptimizeTableHeaderWithIndexProps } from ".";
+import OptimizeTableState from "./optimize-table-state";
 import TableHeaderResizeHandler from "./table-header-resize-handler";
-import OptimizeTableState from "./OptimizeTableState";
-import { cn } from "@/lib/utils";
 
 export default function TableHeader({
   idx,

src/components/gui/table-optimized/table-state-actions.ts

@@ -1,4 +1,4 @@
-import OptimizeTableState from "./OptimizeTableState";
+import OptimizeTableState from "./optimize-table-state";
 
 export default class TableStateActions {
   static duplicateRow(state: OptimizeTableState) {

src/components/gui/table-optimized/useTableVisibilityRecalculation.ts → src/components/gui/table-optimized/use-visibility-calculation.ts

@@ -1,8 +1,8 @@
+import useElementResize from "@/components/hooks/useElementResize";
 import { useCallback, useEffect, useState } from "react";
-import { getVisibleCellRange } from "./helper";
 import { OptimizeTableHeaderWithIndexProps } from ".";
-import useElementResize from "@/components/hooks/useElementResize";
-import OptimizeTableState from "./OptimizeTableState";
+import { getVisibleCellRange } from "./helper";
+import OptimizeTableState from "./optimize-table-state";
 
 export default function useTableVisibilityRecalculation({
   containerRef,

src/components/gui/table-result/context-menu.tsx

@@ -10,7 +10,7 @@ import { KEY_BINDING } from "@/lib/key-matcher";
 import { LucidePlus, LucideTrash2 } from "lucide-react";
 import { useCallback } from "react";
 import { useFullEditor } from "../providers/full-editor-provider";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
+import OptimizeTableState from "../table-optimized/optimize-table-state";
 import TableStateActions from "../table-optimized/table-state-actions";
 
 export default function useTableResultContextMenu({

src/components/gui/table-result/filter-column.tsx

@@ -14,11 +14,10 @@ import {
 import { cn } from "@/lib/utils";
 import { Check, ListChecks, LucideSettings2 } from "lucide-react";
 import { useEffect, useState } from "react";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
+import OptimizeTableState from "../table-optimized/optimize-table-state";
 
 import { Button } from "@/components/orbit/button";
 
-
 export default function useTableResultColumnFilter({
   state,
 }: {
@@ -39,11 +38,15 @@ export default function useTableResultColumnFilter({
   const filterColumnButton = (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant={"secondary"} size={"sm"} className="ml-[3px] bg-neutral-200 border-neutral-300 dark:bg-neutral-800 dark:border-neutral-700 flex items-center gap-1">
+        <Button
+          variant={"secondary"}
+          size={"sm"}
+          className="ml-[3px] flex items-center gap-1 border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+        >
           <LucideSettings2 className="h-3 w-4" />
           Columns
           {!!columnFilterBadge && (
-            <span className="h-4 w-4 ml-1 transform-y-[-2px] rounded-[1px] bg-neutral-700 border border-neutral-600 text-[11px] text-secondary text-secondary-foreground">
+            <span className="transform-y-[-2px] text-secondary text-secondary-foreground ml-1 h-4 w-4 rounded-[1px] border border-neutral-600 bg-neutral-700 text-[11px]">
               {columnFilterBadge}
             </span>
           )}
@@ -58,7 +61,7 @@ export default function useTableResultColumnFilter({
                 onClick={() => {
                   setColumnIndexList(headers.map((_, idx) => idx));
                 }}
-                className="relative mx-1 my-1 flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-semibold outline-hidden hover:bg-secondary aria-selected:bg-accent aria-selected:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50"
+                className="hover:bg-secondary aria-selected:bg-accent aria-selected:text-accent-foreground relative mx-1 my-1 flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm font-semibold outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50"
               >
                 <ListChecks className="mr-2 h-4 w-4" />
                 Select all columns

src/components/gui/tabs-result/query-result-tab.tsx

@@ -6,7 +6,7 @@ import AggregateResultButton from "../aggregate-result/aggregate-result-button";
 import ExportResultButton from "../export/export-result-button";
 import ResultTable from "../query-result-table";
 import ResultStats from "../result-stat";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
+import OptimizeTableState from "../table-optimized/optimize-table-state";
 
 export default function QueryResult({
   result,

src/components/gui/tabs/table-data-tab.tsx

@@ -34,7 +34,7 @@ import AggregateResultButton from "../aggregate-result/aggregate-result-button";
 import ExportResultButton from "../export/export-result-button";
 import OpacityLoading from "../loading-opacity";
 import ResultStats from "../result-stat";
-import OptimizeTableState from "../table-optimized/OptimizeTableState";
+import OptimizeTableState from "../table-optimized/optimize-table-state";
 import useTableResultColumnFilter from "../table-result/filter-column";
 import { Toolbar } from "../toolbar";
 import { useCurrentTab } from "../windows-tab";

src/core/extension-manager.tsx

@@ -1,5 +1,5 @@
 import { OptimizeTableHeaderProps } from "@/components/gui/table-optimized";
-import OptimizeTableState from "@/components/gui/table-optimized/OptimizeTableState";
+import OptimizeTableState from "@/components/gui/table-optimized/optimize-table-state";
 import { DatabaseSchemaItem, DatabaseSchemas } from "@/drivers/base-driver";
 import { ReactElement } from "react";
 import { IStudioExtension } from "./extension-base";

src/drivers/sqlite/sql-parse-table.test.ts

@@ -280,3 +280,71 @@ it("parse strict and without row id table", () => {
     withoutRowId: true,
   } as DatabaseTableSchema);
 });
+
+// Regression test for https://github.com/outerbase/studio/issues/403
+it("parse table with foreign key and default", () => {
+  const sql = `CREATE TABLE "suggestions"(
+  "id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+  "entry" INTEGER NOT NULL REFERENCES "entries"("id"),
+  "user" INTEGER NOT NULL REFERENCES "users"("id"),
+  "scoreBy" INTEGER DEFAULT NULL REFERENCES "users"("id"),
+  "updatedAt" INTEGER NOT NULL DEFAULT (UNIXEPOCH())
+)`;
+
+  expect(p(sql)).toEqual({
+    tableName: "suggestions",
+    schemaName: "main",
+    autoIncrement: true,
+    pk: ["id"],
+    columns: [
+      {
+        name: "id",
+        type: "INTEGER",
+        pk: true,
+        constraint: { notNull: true, primaryKey: true, autoIncrement: true },
+      },
+      {
+        name: "entry",
+        type: "INTEGER",
+        constraint: {
+          notNull: true,
+          foreignKey: {
+            foreignSchemaName: "main",
+            foreignTableName: "entries",
+            foreignColumns: ["id"],
+          },
+        },
+      },
+      {
+        name: "user",
+        type: "INTEGER",
+        constraint: {
+          notNull: true,
+          foreignKey: {
+            foreignSchemaName: "main",
+            foreignTableName: "users",
+            foreignColumns: ["id"],
+          },
+        },
+      },
+      {
+        name: "scoreBy",
+        type: "INTEGER",
+        constraint: {
+          foreignKey: {
+            foreignSchemaName: "main",
+            foreignTableName: "users",
+            foreignColumns: ["id"],
+          },
+          defaultExpression: "NULL",
+        },
+      },
+      {
+        name: "updatedAt",
+        type: "INTEGER",
+        constraint: { notNull: true, defaultExpression: "(UNIXEPOCH())" },
+      },
+    ],
+    constraints: [],
+  } as DatabaseTableSchema);
+});

src/drivers/sqlite/sql-parse-table.ts

@@ -1,14 +1,14 @@
-import type { SyntaxNode, TreeCursor } from "@lezer/common";
 import type {
-  DatabaseTableColumn,
   DatabaseColumnConflict,
+  DatabaseTableColumn,
   DatabaseTableColumnConstraint,
+  DatabaseTableFts5,
   DatabaseTableSchema,
   SqlOrder,
-  DatabaseTableFts5,
 } from "@/drivers/base-driver";
-import { unescapeIdentity } from "./sql-helper";
 import { sqliteDialect } from "@/drivers/sqlite/sqlite-dialect";
+import type { SyntaxNode, TreeCursor } from "@lezer/common";
+import { unescapeIdentity } from "./sql-helper";
 
 export class Cursor {
   protected ptr: SyntaxNode | null;
@@ -286,6 +286,7 @@ export function parseColumnConstraint(
       cursor.next();
     } else if (cursor.type() === "Parens") {
       defaultExpression = cursor.read();
+      cursor.next();
     } else if (
       cursor.match("current_timestamp") ||
       cursor.match("current_time") ||
@@ -295,6 +296,7 @@ export function parseColumnConstraint(
       cursor.match("null")
     ) {
       defaultExpression = cursor.read();
+      cursor.next();
     }
 
     return {