# `MishkaCmsCoreWeb.Live.Admin.Builder.Panels` [🔗](https://github.com/mishka-group/mishka_cms_core/blob/v0.0.1/lib/mishka_cms_core_web/live/admin/builder/panels.ex#L5) Every region of the page-builder chrome as a function component: the 56px top bar, the two resizable side panels, the crumb bar, the canvas frames, the code drawer, the command palette and the overlay sheets. Kept apart from `MishkaCmsCoreWeb.Live.Admin.Builder.BuilderLive` so the LiveView reads as the editor's behaviour — mount, events, session — and this reads as its surface. The measurements come straight from the design prototype: 56px bar, a 272px left panel clamped to 230–460, a 300px right panel clamped to 220–480, 6px drag grips, a 120–620px drawer, and the 900px breakpoint below which both panels collapse into a tab strip. The core's own rails, inspector sections and commands are declared here as `MishkaCmsCore.Builder.Descriptor` seeds, so the core enters its own registries through the same door a plugin does. The canvas toolbar's seed is not among them: that bar is drawn inside the frame, so it is declared where it is rendered, in `MishkaCmsCoreWeb.Live.Admin.Builder.CanvasLive`. # `ago` ```elixir @spec ago(DateTime.t() | term()) :: String.t() ``` How long ago, in the reader's language — "2h ago", "yesterday" — and past two days the day and time, "Jul 3, 18:04". A draft picker is a list of moments, and a bare timestamp makes the reader do the arithmetic. Anything that is not a `DateTime` answers `""`, so a row with no timestamp shortens rather than raising. Shared with `MishkaCmsCoreWeb.Templates.DraftList`, which stamps the same rows. # `aimed_opener` ```elixir @spec aimed_opener( map(), String.t() | nil, MishkaCmsCore.Runtime.PageBuilder.Tree.Node.t() | nil ) :: map() ``` What the target currently being aimed at says it can do, as `%{verb => attribute}`. `chosen` is the id in the target select RIGHT NOW — which is not yet the saved one, because the author is picking it. Without that the verb list would describe the previous target and go stale the moment somebody changed their mind, which is the state a form is in for the whole time it is being filled in. Falls back to what the saved command points at, so a panel rendered fresh describes the aim the document already holds. `%{}` for "aimed at this element" and for a target that declares nothing — both mean "offer everything", which is what `Interactions.actions/1` does with it. # `attr_addable?` ```elixir @spec attr_addable?( map(), MishkaCmsCore.Runtime.PageBuilder.Tree.Node.t() | nil, String.t() ) :: boolean() ``` Whether a free-text add box may put `name` on this node — asked by Advanced's box and by the Attributes list's on an element, of the same rules the list above each box is built from, so the add and the list cannot disagree. A name the node already carries is refused. An add has no value to offer that the row it would land on does not already hold: Advanced sends none at all, and the Attributes box sends whatever was typed beside it, empty included. An empty one is worse than nothing — it either beats the component's own default, or is taken for a removal by the funnel every write goes through, and `class=""` throws away everything the style panel wrote while `:if={}` reads as nil, which takes the element and all of its content off the published page. A HEEx special — `:if`, `:for`, `:let` — is refused whether the node carries it or not: it must be an expression between braces, so `:if=""` is not a condition that never matches, it is a template that will not compile at all, and a box that can only produce a string has no way to write one. The Conditions section above is where a `:if` is written, through `MishkaCmsCore.Runtime.PageBuilder.Conditions`. A name the component declares is refused because Advanced is the attributes it does NOT declare — that property has a control of its own above, and a row written here would never appear. # `avatar_tint` ```elixir @spec avatar_tint(String.t() | nil) :: String.t() ``` A stable colour for a name, for the Review thread's avatar discs. Public because `MishkaCmsCoreWeb.Templates.ReviewComments` draws the same discs — one answer, so the same person is the same colour in the sheet and anywhere else that shows them. # `avatar_tint_class` ```elixir @spec avatar_tint_class(String.t() | nil) :: String.t() ``` The same disc colour as a whole Tailwind class, for a surface that paints it without a `style`. A class assembled around `avatar_tint/1` would be source text no Tailwind build can match, so the five colours are written out one clause each and the hash still chooses between them. # `behavior_on?` ```elixir @spec behavior_on?(MishkaCmsCore.Runtime.PageBuilder.Tree.Node.t() | nil, String.t()) :: boolean() ``` Whether a node already carries every class one of the switches adds. # `behavior_toggles` ```elixir @spec behavior_toggles() :: [{String.t(), String.t(), [String.t()]}] ``` The Behavior switches: a label and the classes each one adds. Every switch is a real class on the element, so it reads the document rather than a flag kept alongside it — turn one on, save, reopen, and it is still on because the class is still there. # `blocks` Whole sections, one click each. The palette lists components and the Studio's Presets tab offers whole-page themes nothing on disk supplies. Between them there was nothing, so a landing page meant placing a grid, a heading, a paragraph and a button and repeating it for every band. Same click-to-place flow the palette uses, so there is nothing new to learn — see `MishkaCmsCore.Runtime.PageBuilder.Blocks`. ## Attributes * `picked_block` (`:any`) - Defaults to `nil`. * `block_cat` (`:string`) - Defaults to `"all"`. * `block_query` (`:string`) - Defaults to `""`. * `block_library` (`:list`) (required) * `element_library` (`:list`) (required) # `center` The centre column: crumb bar, the canvas frames, and the code drawer under them. ## Attributes * `editor` (`:any`) (required) * `tree` (`:any`) (required) * `token` (`:any`) - Defaults to `nil`. * `record` (`:any`) - Defaults to `nil`. * `crumbs` (`:list`) - Defaults to `[]`. * `selection` (`:string`) - Defaults to `nil`. * `selected_node` (`:any`) - Defaults to `nil`. * `picked` (`:string`) - Defaults to `nil`. * `device` (`:any`) - Defaults to `nil`. * `zoom` (`:integer`) - Defaults to `100`. * `frame_row` (`:any`) - Defaults to `nil`. * `frame_zoom` (`:integer`) - Defaults to `100`. * `breakpoint` (`:atom`) - Defaults to `:base`. * `status` (`:any`) - Defaults to `nil`. * `statuses` (`:list`) - Defaults to `[]`. * `resumable` (`:any`) - Defaults to `nil`. * `inherited_draft` (`:any`) - Defaults to `nil`. * `original_changed?` (`:boolean`) - whether the document the open draft was made from has changed since. Defaults to `false`. * `stage` (`:atom`) - Defaults to `:draft`. * `dirty?` (`:boolean`) - Defaults to `false`. * `keeping_draft?` (`:boolean`) - Defaults to `false`. * `code_open` (`:boolean`) - Defaults to `false`. * `code_tab` (`:atom`) - Defaults to `:heex`. * `drawer_h` (`:integer`) - Defaults to `300`. * `marked` (`:any`) - Defaults to `nil`. * `element_css` (`:string`) - Defaults to `""`. * `element_css_error` (`:string`) - Defaults to `nil`. * `element_css_advice` (`:string`) - Defaults to `nil`. * `heex_error` (`:string`) - Defaults to `nil`. # `clear_field` The ✖ inside a text field, shown only while there is something to clear. ## Why there is no hook WHETHER IT IS SHOWN IS A CSS QUESTION. `:placeholder-shown` is true exactly while an input is empty — that is what the pseudo-class means — so `peer-placeholder-shown:hidden` on a button that follows the input answers it in the browser, on the keystroke, with no listener, no state and no round trip. A hook would have to bind `input`, unbind it on destroy, and re-run itself on every LiveView patch to stay right; this cannot fall out of step because there is nothing to fall out of step with. The one requirement it puts on the field is a non-empty `placeholder`, which every search box in the editor already has because an empty one is unlabelled. ## Why the click still reaches the server What these fields hold is not private to the browser: the palette's list, the block sheet's list, the registry's list and the find sheet's hit count are all rendered from the query the SERVER holds. Clearing the input alone would blank the box and leave the results filtered by a word no longer written anywhere — the worst of the two states. So the button pushes the same event the field's own typing pushes, with an empty value, and the field is blanked by the re-render that answers it. ## Why the caret is not put back The obvious finish is `JS.focus/1` on the field, since the reason to clear a search box is to type a different word. It was written that way and it is wrong, which only driving it showed: **LiveView never overwrites the value of a FOCUSED input.** `mergeFocusedInput` copies every attribute except `value`, so focusing the field before the server's answer arrives left the box still reading "drop" over a list that had gone back to all 135 — the exact half-cleared state the paragraph above exists to avoid, produced by trying to be helpful. `JS.set_attribute` cannot stand in for it either: once a person has typed, the input's value property is dirty and no longer follows its attribute. Measured, not assumed. So the field clears and the caret does not return. Clicking into a box you just cleared is one click; a box that lies about what is filtering the list is a bug. ## Attributes * `field` (`:string`) (required) * `event` (`:string`) (required) * `params` (`:map`) - Defaults to `%{}`. # `command_palette` ⌘K — actions first, then the admin routes to jump to. # `conditions` When this element is on the page at all — HEEx's own `:if`, chosen from a list. Sits above On click because it is the earlier question: whether the element is there, then what it does. See `MishkaCmsCore.Runtime.PageBuilder.Conditions` for what each choice writes. ## Attributes * `node` (`:any`) (required) * `state` (`:any`) (required) # `context_actions` ```elixir @spec context_actions() :: [String.t()] ``` Every action the right-click menu can send — the list both LiveViews validate against. # `context_menu` The right-click menu, for a canvas node or a layers row. Nothing in here is dynamic, deliberately: the hook stamps the node it was opened on and pushes the action itself, so opening the menu costs no round trip and no patch can arrive mid-gesture and replace the row under the pointer. See `Hooks.PbContextMenu`. ## Attributes * `id` (`:string`) (required) * `target` (`:string`) (required) - the selector for a row or node this menu belongs to — what a right-click has to land on. * `key` (`:string`) (required) - the dataset key on that element holding the node id — `nodeId` or `layerRow`. # `core_commands` The core's ⌘K commands — the seed of `builder:commands`. # `core_inspector_sections` The core's inspector sections — the seed of `builder:inspector:sections`. # `core_rail_keys` The keys the core draws itself; everything else is drawn by its own descriptor. # `core_rails` The core's right-rail tabs — the seed of the `builder:rails` registry. # `element_css` One element's own CSS. Behind a disclosure, next to Advanced, for the same reason: it is a real need and a rare one, and the panel above it answers the common case. `&` means this element — plain CSS nesting rather than Elementor's `selector` keyword or Bricks' `%root%`, so what is typed is real CSS and can be checked by reading it. See `MishkaCmsCore.Runtime.PageBuilder.ElementCss`. A COMPONENT IS ONE NODE AND MANY ELEMENTS. The rule is keyed on a class written into the node's `class` attribute, which reaches the DOM only if the component declares `class` and puts it somewhere — a kit component that does not is unreachable this way, and offering the box anyway would take CSS that could never match. Those say so instead, and name the way round. The movable list carries NO `phx-no-curly-interpolation`. That attribute is a parse-time switch over the template source and everything nested in it; a declaration's text arrives at runtime, where braces are never interpolated and so need no protecting. Wearing it anyway cost the row its content — the author read the interpolation's own characters back, never the line they had just written. The `&` and `&:hover` shown above the box keep theirs: those ARE template source, and read as literal text either way. THE ADVICE IS SHOWN WHERE THE CSS WAS TYPED. `MishkaCmsCore.Runtime.PageBuilder.ElementCss.advice/1` catches the one mistake the validator cannot refuse — `main { … }` is valid CSS that quietly aims at a `main` INSIDE this element rather than at the element — and the reply only ever reached the code drawer. An author working in this box wrote a rule, watched the page not change, and was told nothing: `inspector/1` took `element_css_advice` and never passed it on. It is drawn next to `@error` and hidden behind it, because a body that will not parse has no aim to comment on yet. ## Attributes * `node` (`:any`) (required) * `entry` (`:any`) - Defaults to `nil`. * `css` (`:string`) - Defaults to `""`. * `error` (`:string`) - Defaults to `nil`. * `advice` (`:string`) - Defaults to `nil`. * `typed` (`:map`) - what the forms hold, typed and not yet applied. Defaults to `%{}`. # `empty_studio_data` ```elixir @spec empty_studio_data() :: map() ``` What the Studio shows before its data has arrived, and when the read fails. One definition so the two cannot drift: a key added to the loader and forgotten here is a `KeyError` in a render, which takes the whole editor down rather than one sheet. # `entry_icon` ```elixir @spec entry_icon(map()) :: atom() ``` The glyph a palette card draws. A component may name its own in `extra.icon` — that is the authored answer and always wins. When it does not, one is SUGGESTED from the name, because "chelekom-checkbox-field" plainly wants the input glyph and making someone fill in 183 rows before the palette looks right is not a real option. The category is the last resort. # `examples_modal` The examples modal: every variant the kit ships for a component, its source, and one button that inserts the whole parsed subtree. The kit carries roughly 3,000 of these. The old editor rendered twelve per component to build the palette, used one, and dropped every attribute on insert; here nothing is pre-rendered and the example arrives intact. # `find_modal` Find and replace over the page's WORDS. Deliberately not over the markup: a page says "Contact Us" in four places and the fifth is a class called `contact-us`. Renaming the company should not touch the CSS, so class names, attributes and expressions are out of reach here — the code drawer is where those are edited, by someone who means to. ## Attributes * `find` (`:string`) - Defaults to `""`. * `replace` (`:string`) - Defaults to `""`. * `hits` (`:list`) - Defaults to `[]`. # `fix_id` ```elixir @spec fix_id(map()) :: String.t() ``` The DOM id of one finding's Fix button. A rule is not a finding. `field-no-form` fires once per loose field and `form-no-destination` once per form, so naming the button after the rule alone put two elements with one id in the document as soon as a page had two forms — reached on a stock install in three clicks. A duplicate id makes `document.getElementById` answer whichever came first, so the second row's Fix drove the first row's node. A document-level finding carries no node and there is at most one of it, so the rule alone is already unique there and the id it has always had is kept. `data-rule` is on every button either way, for anything that wants to find them by rule rather than by finding. # `folder_modal` A new folder, without leaving the page you are building. The same Gervaz form the Media library's Categories panel mounts — `MishkaCmsCore.Runtime.MediaCategory`'s own — so a folder made here is a folder made there, with the same actions, the same validation and the same `master_create` / `create` pair. Shorter by one field for the reason the upload form is: the page belongs to a site, so `hidden_fields` drops Site and `defaults` carries the answer. It starts inside the folder the rail has open, `parent_id`. Nothing here puts the new folder in the rail. `MediaCategory` publishes on `media_category:created` and `BuilderLive` re-reads the rail when it hears it — the same route a folder added in another tab arrives by, so there is one path to be right rather than two. ## It is drawn INSIDE the sheet, and that is load-bearing `fixed inset-0` puts it over everything regardless of where it sits in the DOM, but `phx-click-away` reads the DOM, not the screen. The sheet closes on click-away, so while this was a sibling of the sheet every click in it — including its own Close button — was a click AWAY from the sheet, and shutting the form shut the sheet behind it. Rendered inside, those clicks are contained. Escape needs the other half, and two handlers reach it: this one, and the editor's keyboard hook through `shortcut("escape", …)`. That is fine BECAUSE THEY AGREE — both close this form and neither touches the sheet. It was not fine when they disagreed: the sheet used to bind escape too, so one press pushed two events, the form's landed first and cleared the flag, and the sheet's arrived to find nothing stopping it. Escape shut both. Two are needed because neither covers the other's case. The hook stays quiet while the caret is in a field — correct for ⌘Z, wrong for escape in this form's Name box — and `phx-window-keydown` here answers wherever the caret is. And it is drawn LAST. Inserted as the sheet's first child it shifted every sibling by one, and morphdom pairs children by position — so opening the form destroyed and rebuilt the upload component and the gallery beside it, losing anything staged and re-running the query. Appended, the siblings keep their places and the new node is simply added. ## Attributes * `site_id` (`:string`) - Defaults to `nil`. * `parent_id` (`:string`) - Defaults to `nil`. * `current_user` (`:map`) (required) # `grouped_tokens` # `hook_picker` Attaches this element to a runtime JS hook. A picker, not a code box. Writing a hook stays on Runtime → JS hooks, which is the right amount of friction for shipping executable JavaScript; this only selects from what is already compiled into the site's bundle, and saves someone hand-typing `phx-hook` into Advanced and getting the capitalisation wrong. See `MishkaCmsCore.Runtime.PageBuilder.Hooks`. ## Attributes * `node` (`:any`) (required) * `entry` (`:any`) - Defaults to `nil`. * `hooks` (`:list`) - Defaults to `[]`. * `attached` (`:any`) - Defaults to `nil`. # `icon` One inline SVG from the prototype's icon set — no icon font, no runtime lookup. ## Attributes * `name` (`:atom`) (required) * `size` (`:integer`) - Defaults to `15`. * `class` (`:string`) - Defaults to `nil`. * `filled` (`:boolean`) - solid rather than stroked — the drag grip's dots. Defaults to `false`. # `icon_name` ```elixir @spec icon_name(String.t() | nil) :: atom() ``` The icon this panel draws for a descriptor's plain-string `icon`, so a plugin can name one without depending on this module's atoms. A name the set does not hold falls back to the chevron. # `interactions` What this element does when it is clicked, without anyone writing JavaScript. Sits under Custom CSS because the two are one idea: toggle `is-open` here, write `&.is-open { … }` there, and that is an accordion with no code in it. See `MishkaCmsCore.Runtime.PageBuilder.Interactions` for why a `