@rozenite/sqlite-plugin 1.13.0 → 2.1.0

package/src/ui/query-result-table.tsx

@@ -2,11 +2,7 @@ import { useMemo, useState, type ReactNode } from 'react';
 import type { CellContext, ColumnDef, OnChangeFn } from '@tanstack/react-table';
 import type { SqliteQueryResult } from '../shared/types';
 import { formatDuration, formatNumber } from './utils';
-import {
-  getMetadataBadgeClassName,
-  getValueKind,
-  getValuePreview,
-} from './value-utils';
+import { getMetadataBadgeClassName, getValueKind, getValuePreview } from './value-utils';
 import { CellDetailDrawer } from './cell-detail-drawer';
 import { SqliteDataTable } from './sqlite-data-table';
 
@@ -44,9 +40,8 @@ type DrawerPayload = {
   value: Record<string, unknown>;
 } | null;
 
-const joinClassNames = (
-  ...classNames: Array<string | false | null | undefined>
-) => classNames.filter(Boolean).join(' ');
+const joinClassNames = (...classNames: Array<string | false | null | undefined>) =>
+  classNames.filter(Boolean).join(' ');
 
 const getColumnHeaderTitle = (
   column: string,
@@ -95,9 +90,7 @@ export const QueryResultTable = ({
   const handleInspectRow = (row: Record<string, unknown>, rowIndex: number) => {
     setDrawerPayload({
       title: `Row ${rowNumberOffset + rowIndex + 1}`,
-      value: Object.fromEntries(
-        visibleColumns.map((column) => [column, row[column]]),
-      ),
+      value: Object.fromEntries(visibleColumns.map((column) => [column, row[column]])),
     });
   };
 
@@ -106,9 +99,7 @@ export const QueryResultTable = ({
       ...visibleColumns.map((column) => ({
         id: column,
         header: () => (
-          <span title={getColumnHeaderTitle(column, columnMeta?.[column])}>
-            {column}
-          </span>
+          <span title={getColumnHeaderTitle(column, columnMeta?.[column])}>{column}</span>
         ),
         accessorFn: (row: Record<string, unknown>) => row[column],
         cell: ({ row }: CellContext<Record<string, unknown>, unknown>) => {
@@ -116,9 +107,7 @@ export const QueryResultTable = ({
 
           return (
             <div className="sqlite-cell-value">
-              <span className="sqlite-cell-preview">
-                {getValuePreview(value)}
-              </span>
+              <span className="sqlite-cell-preview">{getValuePreview(value)}</span>
               <span className="sqlite-cell-kind">{getValueKind(value)}</span>
             </div>
           );
@@ -145,12 +134,7 @@ export const QueryResultTable = ({
     <>
       {showMetadata && metadata ? (
         <div className="sqlite-inline-metadata">
-          <span
-            className={joinClassNames(
-              'sqlite-badge',
-              getMetadataBadgeClassName(metadata),
-            )}
-          >
+          <span className={joinClassNames('sqlite-badge', getMetadataBadgeClassName(metadata))}>
             {metadata.statementType}
           </span>
           <span className="sqlite-inline-stat sqlite-tabular">
@@ -183,9 +167,7 @@ export const QueryResultTable = ({
         showRowNumbers
         rowNumberOffset={rowNumberOffset}
         onRowClick={handleInspectRow}
-        getRowAriaLabel={(_, rowIndex) =>
-          `Inspect row ${rowNumberOffset + rowIndex + 1}`
-        }
+        getRowAriaLabel={(_, rowIndex) => `Inspect row ${rowNumberOffset + rowIndex + 1}`}
       />
 
       <CellDetailDrawer

package/src/ui/sql-editor-utils.ts

@@ -2,11 +2,7 @@ import type { Completion } from '@codemirror/autocomplete';
 import type { SQLNamespace } from '@codemirror/lang-sql';
 import { format } from 'sql-formatter';
 import { quoteSqlIdentifier } from '../shared/sql';
-import type {
-  SqliteColumnInfo,
-  SqliteEntity,
-  SqliteSchema,
-} from './sqlite-introspection';
+import type { SqliteColumnInfo, SqliteEntity, SqliteSchema } from './sqlite-introspection';
 
 export type SqlEditorColumnCacheState = {
   databaseId: string | null;
@@ -28,17 +24,14 @@ type SqlEditorAliasLookup = Record<
   }
 >;
 
-const SQL_IDENTIFIER_PATTERN =
-  '"(?:[^"]|"")+"|`(?:[^`]|``)+`|\\[[^\\]]+\\]|[A-Za-z_][\\w$]*';
+const SQL_IDENTIFIER_PATTERN = '"(?:[^"]|"")+"|`(?:[^`]|``)+`|\\[[^\\]]+\\]|[A-Za-z_][\\w$]*';
 
 const bareIdentifierPattern = /^[A-Za-z_][\w$]*$/;
 const trailingIdentifierPattern = /[A-Za-z_][\w$]*$/;
 const entityMemberPattern = new RegExp(
   `(${SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*(${SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*$`,
 );
-const singleMemberPattern = new RegExp(
-  `(${SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*$`,
-);
+const singleMemberPattern = new RegExp(`(${SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*$`);
 const aliasPattern = new RegExp(
   `\\b(?:FROM|JOIN|UPDATE|INTO)\\s+(?:(?:(${SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*)?(${SQL_IDENTIFIER_PATTERN}))(?:\\s+(?:AS\\s+)?(${SQL_IDENTIFIER_PATTERN}))?`,
   'gi',
@@ -63,9 +56,7 @@ const unquoteIdentifier = (identifier: string) => {
 };
 
 const getIdentifierInsertText = (identifier: string) =>
-  bareIdentifierPattern.test(identifier)
-    ? identifier
-    : quoteSqlIdentifier(identifier);
+  bareIdentifierPattern.test(identifier) ? identifier : quoteSqlIdentifier(identifier);
 
 const getColumnDetail = (column: SqliteColumnInfo) => {
   const parts = [column.type].filter(Boolean);
@@ -95,10 +86,7 @@ export const createSqlEditorColumnCache = (
 export const syncSqlEditorColumnCacheDatabase = (
   state: SqlEditorColumnCacheState,
   databaseId: string | null,
-) =>
-  state.databaseId === databaseId
-    ? state
-    : createSqlEditorColumnCache(databaseId);
+) => (state.databaseId === databaseId ? state : createSqlEditorColumnCache(databaseId));
 
 export const getSqlEditorColumnCacheKey = (
   databaseId: string,
@@ -111,8 +99,7 @@ export const getSqlEditorCachedColumns = (
   databaseId: string,
   schemaName: string,
   entityName: string,
-) =>
-  state.entries[getSqlEditorColumnCacheKey(databaseId, schemaName, entityName)];
+) => state.entries[getSqlEditorColumnCacheKey(databaseId, schemaName, entityName)];
 
 export const setSqlEditorCachedColumns = (
   state: SqlEditorColumnCacheState,
@@ -176,12 +163,8 @@ export const buildSqlCompletionSchema = ({
       const columns =
         databaseId == null
           ? []
-          : (getSqlEditorCachedColumns(
-              columnCache,
-              databaseId,
-              entity.schemaName,
-              entity.name,
-            ) ?? []);
+          : (getSqlEditorCachedColumns(columnCache, databaseId, entity.schemaName, entity.name) ??
+            []);
 
       schemaChildren[entity.name] = {
         self: {
@@ -220,19 +203,15 @@ export const getDefaultSqlCompletionSchema = (schemas: SqliteSchema[]) =>
   schemas.find((schema) => schema.name === 'main')?.name ?? schemas[0]?.name;
 
 export const createSqlColumnCompletions = (columns: SqliteColumnInfo[]) =>
-  columns.map(
-    (column): Completion => ({
-      label: column.name,
-      apply: getIdentifierInsertText(column.name),
-      detail: getColumnDetail(column) || undefined,
-      type: 'property',
-      boost: column.primaryKeyOrder > 0 ? 1 : 0,
-    }),
-  );
-
-export const extractSqlEditorAliases = (
-  sqlBeforeCursor: string,
-): SqlEditorAliasLookup => {
+  columns.map((column): Completion => ({
+    label: column.name,
+    apply: getIdentifierInsertText(column.name),
+    detail: getColumnDetail(column) || undefined,
+    type: 'property',
+    boost: column.primaryKeyOrder > 0 ? 1 : 0,
+  }));
+
+export const extractSqlEditorAliases = (sqlBeforeCursor: string): SqlEditorAliasLookup => {
   const aliases: SqlEditorAliasLookup = {};
 
   let match: RegExpExecArray | null;
@@ -256,10 +235,7 @@ export const getSqlEditorColumnCompletionRequest = (
   const beforeCursor = sql.slice(0, cursorPosition);
   const trailingIdentifier = beforeCursor.match(trailingIdentifierPattern)?.[0];
   const replacementLength = trailingIdentifier?.length ?? 0;
-  const lookupPrefix = beforeCursor.slice(
-    0,
-    beforeCursor.length - replacementLength,
-  );
+  const lookupPrefix = beforeCursor.slice(0, beforeCursor.length - replacementLength);
 
   const qualifiedMatch = lookupPrefix.match(entityMemberPattern);
   if (qualifiedMatch) {
@@ -298,8 +274,7 @@ export const resolveSqlEditorEntityReference = ({
   const findExactEntity = (schemaName: string, entityName: string) =>
     entities.find(
       (entity) =>
-        normalizeIdentifier(entity.schemaName) ===
-          normalizeIdentifier(schemaName) &&
+        normalizeIdentifier(entity.schemaName) === normalizeIdentifier(schemaName) &&
         normalizeIdentifier(entity.name) === normalizeIdentifier(entityName),
     ) ?? null;
 
@@ -315,17 +290,13 @@ export const resolveSqlEditorEntityReference = ({
 
     return (
       entities.find(
-        (entity) =>
-          normalizeIdentifier(entity.name) ===
-          normalizeIdentifier(aliasMatch.entityName),
+        (entity) => normalizeIdentifier(entity.name) === normalizeIdentifier(aliasMatch.entityName),
       ) ?? null
     );
   }
 
   const entityMatches = entities.filter(
-    (entity) =>
-      normalizeIdentifier(entity.name) ===
-      normalizeIdentifier(request.entityName),
+    (entity) => normalizeIdentifier(entity.name) === normalizeIdentifier(request.entityName),
   );
 
   if (entityMatches.length === 0) {
@@ -335,8 +306,7 @@ export const resolveSqlEditorEntityReference = ({
   if (selectedSchemaName) {
     const schemaMatch = entityMatches.find(
       (entity) =>
-        normalizeIdentifier(entity.schemaName) ===
-        normalizeIdentifier(selectedSchemaName),
+        normalizeIdentifier(entity.schemaName) === normalizeIdentifier(selectedSchemaName),
     );
 
     if (schemaMatch) {
@@ -345,8 +315,7 @@ export const resolveSqlEditorEntityReference = ({
   }
 
   return (
-    entityMatches.find(
-      (entity) => normalizeIdentifier(entity.schemaName) === 'main',
-    ) ?? entityMatches[0]
+    entityMatches.find((entity) => normalizeIdentifier(entity.schemaName) === 'main') ??
+    entityMatches[0]
   );
 };

package/src/ui/sql-editor.tsx

@@ -5,26 +5,11 @@ import {
   completionKeymap,
   type CompletionSource,
 } from '@codemirror/autocomplete';
-import {
-  defaultKeymap,
-  history,
-  historyKeymap,
-  indentWithTab,
-} from '@codemirror/commands';
-import {
-  schemaCompletionSource,
-  sql,
-  SQLite,
-  type SQLNamespace,
-} from '@codemirror/lang-sql';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { schemaCompletionSource, sql, SQLite, type SQLNamespace } from '@codemirror/lang-sql';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
-import {
-  Compartment,
-  EditorSelection,
-  EditorState,
-  type Extension,
-} from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, type Extension } from '@codemirror/state';
 import { searchKeymap } from '@codemirror/search';
 import {
   Decoration,
@@ -36,13 +21,7 @@ import {
   lineNumbers,
   placeholder,
 } from '@codemirror/view';
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  type Ref,
-} from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, type Ref } from 'react';
 
 export type SqlEditorHandle = {
   focus: () => void;
@@ -137,8 +116,7 @@ const sqlEditorTheme = EditorView.theme(
       display: 'flex',
       flex: '1 1 auto',
       minHeight: '0',
-      fontFamily:
-        "'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace",
+      fontFamily: "'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace",
     },
     '.cm-sizer': {
       minHeight: '100%',
@@ -152,10 +130,9 @@ const sqlEditorTheme = EditorView.theme(
     '.cm-cursor, .cm-dropCursor': {
       borderLeftColor: '#f7fbff',
     },
-    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection':
-      {
-        backgroundColor: 'rgba(89, 163, 255, 0.2)',
-      },
+    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {
+      backgroundColor: 'rgba(89, 163, 255, 0.2)',
+    },
     '.cm-activeLine': {
       backgroundColor: 'rgba(255, 255, 255, 0.032)',
     },
@@ -367,9 +344,7 @@ const SqlEditorInner = (
           history(),
           closeBrackets(),
           syntaxHighlighting(sqlHighlightStyle),
-          sqlSupportCompartment.of(
-            sql({ dialect: SQLite, upperCaseKeywords: true }),
-          ),
+          sqlSupportCompartment.of(sql({ dialect: SQLite, upperCaseKeywords: true })),
           autocompleteCompartment.of(
             createAutocompleteExtension({
               completionSchema: initialConfigRef.current.completionSchema,
@@ -378,15 +353,9 @@ const SqlEditorInner = (
               defaultTable: initialConfigRef.current.defaultTable,
             }),
           ),
-          errorLineCompartment.of(
-            createErrorLineExtension(initialConfigRef.current.errorLine),
-          ),
-          placeholderCompartment.of(
-            placeholder(initialConfigRef.current.placeholderText),
-          ),
-          editableCompartment.of(
-            createEditableExtension(initialConfigRef.current.readOnly),
-          ),
+          errorLineCompartment.of(createErrorLineExtension(initialConfigRef.current.errorLine)),
+          placeholderCompartment.of(placeholder(initialConfigRef.current.placeholderText)),
+          editableCompartment.of(createEditableExtension(initialConfigRef.current.readOnly)),
           keymap.of([
             {
               key: 'Mod-Enter',
@@ -447,9 +416,7 @@ const SqlEditorInner = (
 
     editorView.dispatch({
       effects: [
-        sqlSupportCompartment.reconfigure(
-          sql({ dialect: SQLite, upperCaseKeywords: true }),
-        ),
+        sqlSupportCompartment.reconfigure(sql({ dialect: SQLite, upperCaseKeywords: true })),
         autocompleteCompartment.reconfigure(
           createAutocompleteExtension({
             completionSchema,

package/src/ui/sqlite-data-table.tsx

@@ -19,9 +19,8 @@ import {
 import { formatNumber } from './utils';
 import { SQLITE_ROW_NUMBER_COLUMN_ID } from './sqlite-table-column-order';
 
-const joinClassNames = (
-  ...classNames: Array<string | false | null | undefined>
-) => classNames.filter(Boolean).join(' ');
+const joinClassNames = (...classNames: Array<string | false | null | undefined>) =>
+  classNames.filter(Boolean).join(' ');
 
 const LoadingState = ({ columns }: { columns: number }) => (
   <div className="sqlite-results-loading" aria-live="polite">
@@ -34,10 +33,7 @@ const LoadingState = ({ columns }: { columns: number }) => (
         }}
       >
         {Array.from({ length: Math.max(columns, 3) }, (_, columnIndex) => (
-          <span
-            key={`${rowIndex}-${columnIndex}`}
-            className="sqlite-results-loading-bar"
-          />
+          <span key={`${rowIndex}-${columnIndex}`} className="sqlite-results-loading-bar" />
         ))}
       </div>
     ))}
@@ -74,8 +70,7 @@ const SortableColumnHeader = <TData extends RowData>({
     <th
       scope="col"
       className={joinClassNames(
-        header.column.id === SQLITE_ROW_NUMBER_COLUMN_ID &&
-          'sqlite-results-number-col',
+        header.column.id === SQLITE_ROW_NUMBER_COLUMN_ID && 'sqlite-results-number-col',
         header.column.getIsResizing() && 'sqlite-table-column-resizing',
       )}
       style={{
@@ -165,8 +160,7 @@ export const SqliteDataTable = <TData extends RowData>({
     getCoreRowModel: getCoreRowModel(),
   });
 
-  const loadingColumns =
-    loadingColumnCount ?? columns.length + (showRowNumbers ? 1 : 0);
+  const loadingColumns = loadingColumnCount ?? columns.length + (showRowNumbers ? 1 : 0);
   const tableRows = table.getRowModel().rows;
   const rowVirtualizer = useVirtualizer({
     count: tableRows.length,
@@ -175,8 +169,7 @@ export const SqliteDataTable = <TData extends RowData>({
     overscan: 10,
     getItemKey: (index) => tableRows[index]?.id ?? index,
     measureElement:
-      typeof window !== 'undefined' &&
-      !window.navigator.userAgent.includes('Firefox')
+      typeof window !== 'undefined' && !window.navigator.userAgent.includes('Firefox')
         ? (element) => element?.getBoundingClientRect().height ?? 0
         : undefined,
   });
@@ -235,14 +228,11 @@ export const SqliteDataTable = <TData extends RowData>({
               tabIndex={onRowClick ? 0 : undefined}
               aria-label={
                 onRowClick
-                  ? (getRowAriaLabel?.(row.original, row.index) ??
-                    `Inspect row ${row.index + 1}`)
+                  ? (getRowAriaLabel?.(row.original, row.index) ?? `Inspect row ${row.index + 1}`)
                   : undefined
               }
               onClick={() => onRowClick?.(row.original, row.index)}
-              onKeyDown={(event) =>
-                handleRowKeyDown(event, row.original, row.index)
-              }
+              onKeyDown={(event) => handleRowKeyDown(event, row.original, row.index)}
               style={{
                 transform: `translateY(${virtualRow.start}px)`,
               }}
@@ -251,8 +241,7 @@ export const SqliteDataTable = <TData extends RowData>({
                 <td
                   key={cell.id}
                   className={joinClassNames(
-                    cell.column.id === SQLITE_ROW_NUMBER_COLUMN_ID &&
-                      'sqlite-results-row-number',
+                    cell.column.id === SQLITE_ROW_NUMBER_COLUMN_ID && 'sqlite-results-row-number',
                   )}
                   style={{ width: cell.column.getSize() }}
                 >
@@ -267,16 +256,10 @@ export const SqliteDataTable = <TData extends RowData>({
   );
 
   return (
-    <div
-      className={joinClassNames('sqlite-results-shell', shellClassName)}
-      data-table-id={tableId}
-    >
+    <div className={joinClassNames('sqlite-results-shell', shellClassName)} data-table-id={tableId}>
       <div
         ref={scrollElementRef}
-        className={joinClassNames(
-          'sqlite-results-scroll',
-          scrollContainerClassName,
-        )}
+        className={joinClassNames('sqlite-results-scroll', scrollContainerClassName)}
       >
         {loading ? (
           <LoadingState columns={loadingColumns} />

package/src/ui/sqlite-drop-modal.tsx

@@ -0,0 +1,193 @@
+import { Modal, useOverlayState } from '@heroui/react';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { SqliteModalCloseButton, sqliteSecondaryButtonClassName } from './sqlite-modal-controls';
+
+export type SqliteDropModalTarget =
+  | {
+      kind: 'entity';
+      entityType: 'table' | 'view';
+      qualifiedName: string;
+      confirmationValue: string;
+      sql: string;
+    }
+  | {
+      kind: 'database';
+      databaseName: string;
+      confirmationValue: string;
+      tableCount: number;
+      viewCount: number;
+      sql: string;
+    };
+
+type SqliteDropModalProps = {
+  isOpen: boolean;
+  target: SqliteDropModalTarget;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+};
+
+const toneButtonClassName =
+  'sqlite-button inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-sm font-medium';
+const dangerButtonClassName = `${toneButtonClassName} border border-rose-400/30 bg-rose-500/16 text-rose-50 hover:bg-rose-500/24`;
+
+const getModalTitle = (target: SqliteDropModalTarget) =>
+  target.kind === 'entity'
+    ? `Drop ${target.entityType === 'view' ? 'View' : 'Table'}`
+    : 'Drop All Objects';
+
+const getModalSubtitle = (target: SqliteDropModalTarget) =>
+  target.kind === 'entity' ? target.qualifiedName : target.databaseName;
+
+const getConfirmationLabel = (target: SqliteDropModalTarget) =>
+  target.kind === 'entity'
+    ? `${target.entityType === 'view' ? 'view' : 'table'} name`
+    : 'database name';
+
+export const SqliteDropModal = ({ isOpen, target, onClose, onConfirm }: SqliteDropModalProps) => {
+  const overlay = useOverlayState({
+    isOpen,
+    onOpenChange: (open: boolean) => {
+      if (!open) {
+        onClose();
+      }
+    },
+  });
+  const [dropping, setDropping] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [confirmationInput, setConfirmationInput] = useState('');
+
+  useEffect(() => {
+    if (isOpen) {
+      setDropping(false);
+      setError(null);
+      setConfirmationInput('');
+    }
+  }, [isOpen]);
+
+  const isConfirmed = confirmationInput === target.confirmationValue;
+
+  const handleConfirm = async () => {
+    if (!isConfirmed) {
+      return;
+    }
+
+    try {
+      setDropping(true);
+      setError(null);
+      await onConfirm();
+      onClose();
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : String(nextError));
+    } finally {
+      setDropping(false);
+    }
+  };
+
+  return (
+    <Modal state={overlay}>
+      <Modal.Backdrop
+        variant="blur"
+        isDismissable={!dropping}
+        className="bg-[rgba(5,10,16,0.24)] backdrop-blur-[2px]"
+      >
+        <Modal.Container placement="center" size="md" scroll="inside">
+          <Modal.Dialog
+            aria-label={`${getModalTitle(target)} ${getModalSubtitle(target)}`}
+            className="w-full max-w-xl overflow-hidden border border-white/10 bg-[#0a121b] p-0 text-white shadow-[0_30px_90px_rgba(0,0,0,0.42)]"
+          >
+            <div className="flex items-center justify-between gap-4 border-b border-white/8 px-5 py-5">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/12 text-rose-200">
+                  <AlertTriangle aria-hidden="true" className="h-5 w-5" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold text-white">{getModalTitle(target)}</h2>
+                  <p className="mt-1 text-sm text-slate-400">{getModalSubtitle(target)}</p>
+                </div>
+              </div>
+              <SqliteModalCloseButton onClose={onClose} disabled={dropping} />
+            </div>
+
+            <Modal.Body className="space-y-0 p-0">
+              <div className="space-y-5 px-5 py-5">
+                {target.kind === 'database' ? (
+                  <p className="text-sm leading-6 text-slate-300">
+                    This drops every table and view in{' '}
+                    <span className="font-medium text-white">{target.databaseName}</span> —{' '}
+                    {target.tableCount} table
+                    {target.tableCount === 1 ? '' : 's'} and {target.viewCount} view
+                    {target.viewCount === 1 ? '' : 's'}, along with all their rows, indexes and
+                    triggers. The database file itself is not deleted; it is left empty. This cannot
+                    be undone.
+                  </p>
+                ) : (
+                  <p className="text-sm leading-6 text-slate-300">
+                    This permanently drops{' '}
+                    <span className="font-medium text-white">{target.qualifiedName}</span> and
+                    everything it owns — rows, indexes and triggers. This cannot be undone.
+                  </p>
+                )}
+
+                <div className="space-y-2">
+                  <p className="sqlite-helper-text">SQL to be executed</p>
+                  <pre className="max-h-40 overflow-auto rounded-lg border border-white/8 bg-black/30 px-3 py-2 text-xs leading-5 text-slate-200">
+                    {target.sql}
+                  </pre>
+                </div>
+
+                <div className="space-y-2">
+                  <label htmlFor="sqlite-drop-confirmation-input" className="sqlite-helper-text">
+                    Type the {getConfirmationLabel(target)}{' '}
+                    <span className="font-medium text-white">{target.confirmationValue}</span> to
+                    confirm
+                  </label>
+                  <input
+                    id="sqlite-drop-confirmation-input"
+                    type="text"
+                    name="dropConfirmation"
+                    autoComplete="off"
+                    spellCheck={false}
+                    className="sqlite-input"
+                    value={confirmationInput}
+                    onChange={(event) => setConfirmationInput(event.target.value)}
+                    disabled={dropping}
+                  />
+                </div>
+
+                {error ? (
+                  <div className="sqlite-inline-error" aria-live="polite">
+                    <div>
+                      <p className="font-medium text-rose-100">Drop Failed</p>
+                      <p className="mt-1 text-sm text-rose-100/90">{error}</p>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+
+              <div className="flex items-center justify-end gap-3 border-t border-white/8 px-5 py-5">
+                <button
+                  type="button"
+                  className={sqliteSecondaryButtonClassName}
+                  onClick={onClose}
+                  disabled={dropping}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className={dangerButtonClassName}
+                  onClick={() => void handleConfirm()}
+                  disabled={dropping || !isConfirmed}
+                >
+                  <Trash2 aria-hidden="true" className="h-4 w-4" />
+                  {dropping ? 'Dropping…' : getModalTitle(target)}
+                </button>
+              </div>
+            </Modal.Body>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
+  );
+};