feat(website): pace modes/undo-redo/joins casts (split submits, surface state)

Split the short pivotal commands from their submit so they read before
the screen changes (`mode advanced` in modes/joins; `undo`/`redo` before
their confirm modals), and surface the source tables in joins with
`show data` before the join, since the schema sidebar is hidden at 90 cols.
This commit is contained in:
claude@clouddev1
2026-06-11 13:49:40 +00:00
parent ad43cce945
commit 946dd88db6
4 changed files with 1394 additions and 1330 deletions
+17 -5
View File
@@ -116,7 +116,10 @@ export const casts = [
{ type: "insert into books (title) values ('A Wizard of Earthsea')", after: 650 },
{ type: "insert into books (title) values ('Invisible Cities')", after: 1100 },
{ type: 'show data books', after: 1600 }, // simple mode — no SQL echo
{ type: 'mode advanced', after: 1300 },
// Split the mode switch (type → beat → submit) so the short, pivotal
// command reads before the screen changes.
{ type: 'mode advanced', enter: false, after: 1100 },
{ key: 'Enter', after: 1300 },
{ type: 'show data books', after: 2400 }, // advanced — shows "Executing SQL: …"
{ key: 'CtrlC' }, // quit invisibly (Ctrl-C) — cast ends on the last content frame
],
@@ -134,10 +137,14 @@ export const casts = [
{ type: "insert into books (title) values ('A Wizard of Earthsea')", after: 650 },
{ type: "insert into books (title) values ('Invisible Cities')", after: 1100 },
{ type: 'show data books', after: 1500 }, // two rows
{ type: 'undo', after: 1300 }, // opens the confirmation modal
// Split the short command from its submit so `undo` reads before the
// confirmation modal pops over it.
{ type: 'undo', enter: false, after: 1000 },
{ key: 'Enter', after: 1300 }, // submit → opens the confirmation modal
{ type: 'y', enter: false, after: 1600 }, // Y confirms
{ type: 'show data books', after: 1500 }, // one row
{ type: 'redo', after: 1200 },
{ type: 'redo', enter: false, after: 1000 },
{ key: 'Enter', after: 1300 },
{ type: 'y', enter: false, after: 1600 },
{ type: 'show data books', after: 1700 }, // two rows again
{ key: 'CtrlC' }, // quit invisibly (Ctrl-C) — cast ends on the last content frame
@@ -162,8 +169,13 @@ export const casts = [
{ type: "insert into books (title, author_id) values ('A Wizard of Earthsea', 1)", after: 600 },
{ type: "insert into books (title, author_id) values ('The Left Hand of Darkness', 1)", after: 600 },
{ type: "insert into books (title, author_id) values ('Invisible Cities', 2)", after: 900 },
// switch to SQL and join
{ type: 'mode advanced', after: 1200 },
// Surface the two source tables before joining them — at 90 cols the
// schema sidebar is hidden, so this is how the viewer sees what's there.
{ type: 'show data authors', after: 1600 },
{ type: 'show data books', after: 1900 },
// switch to SQL and join (split the mode switch for a readable beat)
{ type: 'mode advanced', enter: false, after: 1100 },
{ key: 'Enter', after: 1300 },
{
type: 'select authors.name, books.title from books join authors on books.author_id = authors.author_id order by authors.name',
after: 2600,