The site's shell is min-h-dvh so a short page puts its footer at the bottom of the
window. Measuring it then asks the frame how tall the frame is, and the answer is
whatever it already was.
So the minimum is neutralised by a stylesheet injected into the frame, and what is
left is the height of what is on the page.
The cost, stated: the preview does not show a footer pushed to the bottom of a
window, because it is not a window. It shows the page ending where it ends.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Whichever it is: Administration is the one row a member never sees, so the row
that ends the group depends on who is looking. Naming it would put the line back
for everybody else.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Selecting a band showed its name and title and nothing about what was in it — so
adding a block to the thing you were looking at meant going back out to the page.
BandBlocks is that list, used by the band's editor and nested under every band in
the page's structure. Same list, same actions, one component; the galleries panel
taught that lesson once already.
Blocks reorder within a column now. Across columns is the same call — the write
carries the column — but a list per column has no gesture for crossing between
them, and inventing one here would be guessing.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adding a block means choosing which column it goes in, so a flat list cannot
express it. A one-column band shows one button and a two-column band shows two —
and a band with one column never has to answer a question it has no answer to.
The blocks are links, like everywhere else: pressing one opens its editor.
That is the last of the four actions the painted-on bars used to carry.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Add, delete and reorder a band. Those three were reached from a bar painted onto
the page until the overlays went, and have had no door since.
Shown when nothing inside the page is selected — after the band and the block,
because those are things you opened deliberately and this is what is there when
you have not.
The nav lists the same bands and is for GOING somewhere; this is for changing what
the page is made of. Two verbs on the same nouns, and mixing them would mean a nav
row that sometimes navigates and sometimes deletes.
Same reorder gesture as pages, gallery items and partners.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Three versions of this now, and the reasons are worth keeping.
key={reloadToken} replaced the ELEMENT, so the panel went white between
documents. contentWindow.location.reload() kept the element but did not reliably
re-fetch. A changing src does both: the browser navigates the same element — so
it keeps painting the current document until the next commits — and the URL
differs, so nothing is served from cache.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The frame carried key={reloadToken}, so a reload was a NEW element: React
unmounted the old one and the panel went white until the next document arrived.
After a crop change that is not instant — the site is asking av-club for a fresh
ladder — so every framing adjustment flashed an empty panel, which reads as the
preview breaking.
A browser keeps painting the current document while the next is being fetched. So
the element stays and the frame is navigated instead. Same origin through the dev
proxy, which is what makes contentWindow reachable.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
MediaField is controlled: it reports every pointer move and draws what it is
handed back. Wired straight to the block, that was a PATCH and a full reload of
the preview per move, and the page went white while somebody dragged.
The drag runs against local state now — instant — and the write is debounced by
useAutosave, the same hook every other control here uses.
The reset effect keys on the url and the shape, not on the crop. Keyed on the
crop it would fight the drag: the parent's value is the last SAVED one, so every
move would snap back until the save landed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
With a shape set, MediaField replaces the plain thumbnail: it draws the picture
in that shape and lets somebody drag and zoom to say which part shows. It already
did all of that — it needed the block's crop and the aspect.
Without a shape there is nothing to frame into, so the thumbnail stays and there
is no framing control that would do nothing.
Changing the shape clears the crop. A crop is a rectangle OF a shape, and keeping
it would frame the new one by numbers chosen for the old.
One SHAPES table, because three things have to agree: the options, the float
stored as content.ratio, and the Tailwind aspect MediaField frames into.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Choose 16:9 and the band gets shorter than the picture — the ratio becomes a slot
shape and the site serves a rendition cut to it, rather than a whole photograph
scaled down by the browser.
`setContent` writes the whole content object, because the API replaces it rather
than merging: a PATCH with `{ ratio }` alone would drop the url.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The scroll ran on `rendered` changing, which is the moment the reload STARTS —
frameDoc still pointed at the outgoing document, so it scrolled the page about to
be replaced and the new one arrived at the top. Every write from the editor did
it: reorder a gallery or a partner, lose your place.
It now happens in onDocument, against the document that has just loaded. The
effect stays for the other case — a different band chosen with no reload — and
keeps its smooth scroll, because there you are watching it move.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The block places the list; it does not hold one. So this edits the singleton and
every page showing them changes together — which the panel says out loud, because
the editor sits inside a block on a page and everything else in that column
belongs to the page.
Same gesture as the gallery items: a grip on the left, live reorder, one write at
the end carrying every id. Two ordered lists, one thing to learn.
A new partner is named from its filename and renamed in the field beside it — the
API refuses one with no name, and asking in a second dialog before the logo has
been seen is a form in front of a form.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
GalleriesPanel drew its own copy of the item list — same operations, same routes,
arrows instead of a grip. It is a master list now: which galleries there are,
making one, deleting one. What is inside the selected one is announced to the
editor column and drawn by GalleryItems, which is what a gallery BLOCK already
used.
The device toggle only shows where there is a page to look at. It sets the width
the preview renders at, and Galleries, Media and Administration have none.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Nine items meant eighteen arrows and four presses to move something from the
bottom to the top. A grip on the left, the row as the drop target, and the list
rearranging as the pointer crosses it — the same gesture the page rows use.
One write at the end, carrying every id in order.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Add, remove, reorder and caption, in the editor column. A gallery block on a page
IS a gallery, and being sent to another section to reorder it means losing the
page you were arranging it for.
It reads the gallery itself from its id, so it can be dropped anywhere something
knows one.
GalleriesPanel still draws its own copy of this list. That is a real duplicate
and it should adopt this component — its version has the same operations against
the same routes, plus creating and deleting whole galleries, which this does not.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Inside the band, whole width of main, or whole page width. The negatives are
gone from the padding select — padding is padding again.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
React nulls `currentTarget` once the handler returns, and a functional state
updater runs after that — so typing one character into a band's name threw and
took the whole editor panel down.
Three places, all mine from today. Everything older read the value eagerly.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The measure was drawn on Layout only, and this is the screen where things are
placed against it. It also answers the question a negative margin asks: a block
escaping the gutter has to be seen escaping it, against the line it crossed.
Horizontal padding now offers negatives, built from the same scale so there is
still one list.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A strip of a photograph tells you it is a photograph and not which one. Full
width, its own aspect, under the button rather than beside it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
"Choose media…" and nothing else asks somebody to open a dialog to find out what
they already chose. The thumbnail and the filename answer it where they stand.
A video shows its poster rather than playing: the question is which file this is,
and a frame answers that.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
editComponent means "edit what is IN this block", and for media and galleries
that is a dialog over the whole screen. Firing it on selection threw one at you
before you had asked for it — those kinds get a button in the settings instead.
Free text keeps opening inline, because its editor is in the same column and
opening it IS showing the settings.
The text editor now only renders when it belongs to the selected block. A stale
one showed the previous block's words under the new block's title.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Spacing had a link in the chrome painted onto the page and lost its door with the
rest of it. It belongs beside the heading: both are properties of the selected
block, and one of the two is not worth a place of its own to go to.
The page's name and address now show only when the page row itself is selected.
With a band or a block open they sat above an editor about something else and
read as belonging to it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
canEditComponent answers "is there content to type", and a heading is not
content — so the blocks with no editor of their own are now selectable too, and
get the heading alone.
The live draft writes into [data-block] when there is one. A titled component
renders as a wrapper, and writing into the wrapper would replace the heading with
the paragraph as somebody typed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Name and Title, in the editor column — the band row in the nav had only scrolled
the preview until now.
Both, not the title alone: a form showing one of two names invites somebody to
change the wrong one, and `name` could only be set when the band was created.
Last in the editor's order, so a block or a spacing editor wins — those were
opened deliberately, and the band is merely still selected underneath them.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A fourth level under the open band only — a page of six bands with four blocks
each is thirty rows, and the nav stops being somewhere you can find anything.
Blocks are named by the same list the picker offers, so a thing is called the
same word wherever it appears.
Clicking a block in the PAGE now writes that address too, rather than calling the
handler directly. Both ways of picking a block are the same act, so neither can
disagree with the other about what is selected — and closing it is the band row.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A third level, under the selected page only — every page has bands, and listing
all of them would make the nav longer than the site.
Announced by the builder rather than fetched again: it already reads them to know
what it is looking at in the document, and it mounts exactly when a page is open.
Cleared on unmount, or the nav keeps listing the last page's bands.
Clicking one writes a third URL segment and the preview scrolls to it, keyed on
the render count too so the position survives a save replacing the frame.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A bar on every band, Edit / Spacing / Delete above every block, dotted outlines
around blocks and columns, an add-zone at the end. Look at that and you are
looking at the editor, not the page — on the screen whose whole purpose is
judging the page.
A click selects a block and its editor opens in the panel beside the preview,
where every other control now lives. data-fofos-component stays: it is how the
panel writes a draft into the page as somebody types.
Adding a section, adding a block, deleting either and opening a spacing editor
have no door any more. The handlers are untouched and nothing calls them.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Menu item, address and page title — what the retired /fofos-admin/pages panel
held, moved to the column where everything else about that page is edited.
Above the device toggle, because the toggle scopes what is under it to one width
and none of these three have widths. Read from the URL rather than announced:
they belong to the page whatever is selected inside it, so picking a block must
not replace them.
A changed slug changes the page's own address, so the panel follows it — left
alone the URL would name a page the list no longer holds.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Home has no grip, and dropping onto it is refused — hiding the handle alone
would still let something be dragged above the site's front door.
Every preview now reloads on the change channel, not just the page builder's own
writes. The Layout preview draws the top menu and had no reload token at all, so
the one screen where a reorder is visible was the one that never showed it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The grip drags and the row is the drop target — a Link is draggable by default
and drags its URL, so making the row itself draggable fights the browser for what
the gesture means.
The list rearranges as the pointer crosses a row rather than on drop, and the
write happens once at the end: PUT /pages/order takes the whole set, because an
order is a property of the set.
/fofos-admin/pages was a list of cards beside a nav that already lists the pages.
Two lists of the same thing, and the one you were looking at was never the one
you had clicked. It redirects to the first page now.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Top Menu, Content and Footer were a hierarchy the screen does not have — all
three are edited by the same controls at the same time, so clicking one changed
the URL and nothing else.
The pages were announced by PagesPanel and only by PagesPanel, which mounts when
Pages is open. So they were invisible in the nav until you had already been to
the page that lists them. The nav fetches them itself when nobody has said yet;
the channel stays, and is still why a rename shows here the moment it is typed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
"Inherit (default)" answers a question nobody asked. What somebody wants from
that dropdown is what it is now — and a label that will not say makes them change
the setting to find out, which is the one way to lose the answer.
It reads Default (4xl) at the smallest width and Inherit (2xl) above it. The
stylesheet's own sizes come from the API, which reads them out of styles.css.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Officer's session is the only place the acting user is known, and fofos writes it
into its own change history. An email in X-Actor, because that database has no
users to point at.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The room between a band's columns: gap-8 in a two-column section, gap-x-24
gap-y-10 in the footer. Both were written into the template that drew them.
The canvas now SKIPS a utility nothing has chosen instead of stripping it. The
old rule lied twice — a section's own padding vanished while the panel was open,
and a band with no chosen gap lost the site's default.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A container query on the scroller, once, so a new section is responsive by being
in the column rather than by remembering to say so. Below 320px the two-column
sections stack instead of truncating every select to "Martia…".
Colors stays flex-wrap: three swatches in a two-column grid is 2 and 1.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Fonts and Font Sizes are the same four things, so they now read in the same order
under the same names — Menu, Titles, Headings, Body — from one list.
font_display is the largest statements and font_title is a section heading, which
is the reverse of what the words suggest. The labels say what the reader sees.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A fifth section between Fonts and Spacing. The same four roles the families use,
so a template asks for a role and gets both — and a role used at two sizes on
purpose collapses to one, which was the trade taken over a separate list of text
roles.
The live preview builds the same stylesheet the site renders, because a size is
three values and an inline style cannot carry a media query.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Every field in there writes one breakpoint, chosen by the tabs at the top of the
panel. Without the name the same six selects mean six different things depending
on something above them.
One span, not two: the trigger is justify-between and puts the chevron last.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The line under every nav row, the line under every font select, and the caption
under the preview. Each explained a control to somebody who has already found
it, and the caption was wrong as well — there is no Save to press.
The nav rows are one line now, so they centre.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
text-xs was the size of the labels under it, so the three headings read as one
more row of form furniture. Bigger and heavier — weight is the signal that
survives at this density without adding a second thing to look at.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A container query, not a screen one: this sits in a workspace panel whose width
is a divider somebody drags, so the window says nothing about the room. Below
240px the icons stand alone and the word is the tooltip.
Every editor section starts open. It opened on one, from ?tab=, which is what
tabs want — these are not tabs, and a collapsed column asks somebody to go
looking for the setting they came for. ?tab= is gone with it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Icons alone told three things apart by proportion at 12 pixels. Full width, one
of three filled, and the word from DEVICES.
The `size` prop is gone with the bar that needed the small one, and so is the
second copy inside Spacing — the panel header scopes the whole editor now.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
It sat across the top of the detail panel with Sync, Build and Publish — three
things that act on the site, beside one that decides how you are looking at it.
The toggle belongs with the settings it scopes: a spacing is chosen per width,
so the control saying which width is the first thing in that column.
Sync, Build and Publish are unmounted until they have a place of their own.
ViewModeProvider stays; it was never the bar's.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The Save button is gone, and so is the SaveTarget context that announced it.
Every screen here is a preview of the thing being edited, so a change is already
visible before it is written — a button then asks somebody to confirm what they
can see.
useAutosave debounces a burst into one request. It takes the unsaved state as a
string rather than a flag, so a failed save is not retried on the next render,
and it flushes on unmount so a section change loses nothing.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The frame took all the room the panel had, so a short page left a band of white
under the footer with the measure guides running down through it. An iframe has
no height: fit-content, so the page is measured inside it and the frame follows.
The wrapper, not the body — body is min-h-screen, so measuring it would ask the
frame how tall the frame is.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The platform hands over the whole subtree under the mount. Which paths exist and
what they mean is web/routes.ts.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The admin declares its routes in the manifest, so /fofos-admin/layout/header and
/fofos-admin/pages/home are real URLs. One reader takes the two segments after
the mount; links carry no query string at all, so nothing leaks between
sections.
What stays in the query is how you are looking — device, tab, view — rather than
at what.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Space between became Vertical padding: space-y hangs its margin below the box,
and the box's bottom border is the separator, so the room never landed above a
rule. The canvas now rewrites both axes on a band.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Top Nav, Sections and Footer each get their own horizontal padding, plus the
one space that band owns: the room under the rule, the gap between bands, the
room above the footer.
The preview marker now names its band, so a change moves one band and not all
three.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
pastilhasandClaude Opus 5