@perspective-dev/viewer 5.3.1 → 5.4.0

package/src/rust/{components → ui}/containers/split_panel.rs

@@ -26,25 +26,18 @@ pub struct SplitPanelProps {
     #[prop_or_default]
     pub id: Option<String>,
 
-    /// Extra classes on the root element (ignored under `no_wrap`).
     #[prop_or_default]
     pub class: Classes,
 
     #[prop_or_default]
     pub orientation: Orientation,
 
-    /// Whether to OMIT children that render nothing (an empty fragment, or
-    /// any nesting of empty fragments — see [`is_empty_html`]) instead of
-    /// rendering them as empty panes. A skipped pane takes its divider with
-    /// it.
     #[prop_or_default]
     pub skip_empty: bool,
 
-    /// Should the child panels by wrapped in `<div>` elements?
     #[prop_or_default]
     pub no_wrap: bool,
 
-    /// Should the panels be rendered/sized in _reverse_ order?
     #[prop_or_default]
     pub reverse: bool,
 
@@ -60,31 +53,13 @@ pub struct SplitPanelProps {
     #[prop_or_default]
     pub initial_size: Option<i32>,
 
-    /// When `true`, a divider drag does NOT apply pane sizes directly:
-    /// `MoveResizing` only emits `on_resize` with the proposed dims, and pane
-    /// 0's committed size is driven exclusively by the controlled
-    /// [`Self::size`] prop — set by the parent when it is ready (e.g. after
-    /// pre-rendering panel content at the target size). This is the presize
-    /// gate for continuous divider drags (`PRESIZE_EVERYWHERE_PLAN.md`,
-    /// P1): geometry never outruns content. Only meaningful when the
-    /// resizable pane is child 0 (as in the viewer's `app_panel`).
     #[prop_or_default]
     pub deferred: bool,
 
-    /// Controlled committed size for pane 0 (deferred mode). Unlike
-    /// [`Self::initial_size`] (read once at `create`), changes to this prop
-    /// re-derive pane 0's style on every `changed`.
     #[prop_or_default]
     pub size: Option<i32>,
 }
 
-/// `true` when `node` renders NOTHING: an empty fragment, or a fragment of
-/// nothing but empty fragments. SEMANTIC, not literal — the `html!`
-/// if-syntax (and other wrappers) nests an empty branch inside another
-/// `VList` rather than yielding a bare `<></>`, which is why a literal
-/// `x != html! { <></> }` comparison is not a usable emptiness test (see
-/// the mechanism unit test). Deliberately conservative: `VText("")` and
-/// other node kinds are NOT considered empty.
 fn is_empty_html(node: &Html) -> bool {
     match node {
         Html::VList(list) => list.iter().all(is_empty_html),
@@ -92,8 +67,6 @@ fn is_empty_html(node: &Html) -> bool {
     }
 }
 
-/// The fixed-size pane style for a committed size (the complement pane
-/// flex-fills).
 fn size_style(orientation: Orientation, x: i32) -> String {
     match orientation {
         Orientation::Horizontal => {
@@ -132,19 +105,6 @@ pub enum SplitPanelMsg {
 
 /// A panel with 2 sub panels and a mouse-draggable divider which allows
 /// apportioning the panel's width.
-///
-/// # Examples
-///
-/// ```
-/// html! {
-///     <SplitPanel id="app_panel">
-///         <div id="A">
-///         <div id="B">
-///             <a href=".."></a>
-///         </div>
-///     </SplitPanel>
-/// }
-/// ```
 pub struct SplitPanel {
     resize_state: Option<ResizingState>,
     refs: Vec<NodeRef>,
@@ -159,8 +119,6 @@ impl Component for SplitPanel {
     fn create(ctx: &Context<Self>) -> Self {
         assert!(ctx.props().validate());
         let len = ctx.props().children.len();
-        // cant just use vec![Default::default(); len] as it would
-        // use the same underlying NodeRef for each element.
         let refs = Vec::from_iter(std::iter::repeat_with(Default::default).take(len));
 
         let mut styles = vec![Default::default(); len];
@@ -179,6 +137,14 @@ impl Component for SplitPanel {
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             SplitPanelMsg::Reset(index) => {
+                if ctx.props().deferred {
+                    if let Some(cb) = &ctx.props().on_reset {
+                        cb.emit(());
+                    }
+
+                    return false;
+                }
+
                 self.styles[index] = None;
                 self.on_reset.clone_from(&ctx.props().on_reset);
             },
@@ -201,9 +167,6 @@ impl Component for SplitPanel {
                         cb.emit(state.get_dimensions(client_offset));
                     }
 
-                    // Deferred mode: propose only — the committed size arrives
-                    // back through the controlled `size` prop once the parent
-                    // has pre-rendered content at the target.
                     if !ctx.props().deferred {
                         self.styles[state.index] = state.get_style(client_offset);
                     }
@@ -239,8 +202,6 @@ impl Component for SplitPanel {
             }
         }
 
-        // Deferred mode: pane 0's style tracks the controlled `size` prop
-        // (`None` = natural width, e.g. after a divider double-click reset).
         if ctx.props().deferred {
             self.styles[0] = ctx
                 .props()
@@ -255,15 +216,6 @@ impl Component for SplitPanel {
         let skip_empty = ctx.props().skip_empty;
         let orientation = ctx.props().orientation;
 
-        // Pair each *visible* pane with its ORIGINAL child index and key every
-        // pane (and divider) by that stable identity — not its post-filter
-        // position. Toggling one pane in/out (e.g. the settings sidebar) then
-        // never shifts a sibling's key, so Yew reconciles the survivor in place
-        // rather than remounting it. A `MainPanel` remount here would tear down
-        // and recreate the embedded `<regular-layout>` and the `<slot>`s
-        // projecting the plugins — the bug this avoids. Dividers are independent
-        // keyed nodes for the same reason: a divider appearing before a pane must
-        // not alter that pane's own keyed subtree.
         let panes = ctx
             .props()
             .children
@@ -276,8 +228,6 @@ impl Component for SplitPanel {
         let mut nodes: Vec<Html> = Vec::with_capacity(panes.len() * 2);
         let mut prev: Option<usize> = None;
         for (pos, (i, x)) in panes.into_iter().enumerate() {
-            // A divider precedes every visible pane except the first; it resizes
-            // the *previous* visible pane (`prev`, an original index).
             if let Some(p) = prev {
                 nodes.push(html! {
                     <SplitPanelDivider
@@ -289,9 +239,6 @@ impl Component for SplitPanel {
                 });
             }
 
-            // The last visible pane flex-fills (rendered bare, no width
-            // override); earlier panes are `SplitPanelChild`s that can carry a
-            // dragged size.
             nodes.push(if pos == last {
                 html! { <key={i}>{ x }</> }
             } else {
@@ -348,7 +295,6 @@ impl PartialEq for SplitPanelDividerProps {
     }
 }
 
-/// The resize handle for a `SplitPanel`.
 #[function_component(SplitPanelDivider)]
 fn split_panel_divider(props: &SplitPanelDividerProps) -> Html {
     let orientation = props.orientation;
@@ -371,11 +317,6 @@ fn split_panel_divider(props: &SplitPanelDividerProps) -> Html {
         SplitPanelMsg::Reset(i)
     });
 
-    // TODO Not sure why, but under some circumstances this can trigger a
-    // `dragstart`, leading to further drag events which cause perspective
-    // havoc.  `event.prevent_default()` in `onmousedown` alternatively fixes
-    // this, but also prevents this event from trigger focus-stealing e.g. from
-    // open dialogs.
     let ondragstart = Callback::from(|event: DragEvent| event.prevent_default());
 
     html! {
@@ -411,8 +352,6 @@ fn split_panel_child(props: &SplitPanelChildProps) -> Html {
     }
 }
 
-/// The state for the `Resizing` action, including the `MouseEvent` callbacks
-/// and panel starting dimensions.
 struct ResizingState {
     mousemove: Closure<dyn Fn(MouseEvent)>,
     mouseup: Closure<dyn Fn(MouseEvent)>,
@@ -429,9 +368,6 @@ struct ResizingState {
 }
 
 impl Drop for ResizingState {
-    /// On `drop`, we must remove these event listeners from the document
-    /// `body`. Without this, the `Closure` objects would not leak, but the
-    /// document will continue to call them, causing runtime exceptions.
     fn drop(&mut self) {
         let result: ApiResult<()> = (|| {
             let mousemove = self.mousemove.as_ref().unchecked_ref();
@@ -446,12 +382,8 @@ impl Drop for ResizingState {
     }
 }
 
-/// The minimum size a split panel child can be, including when overridden via
-/// user drag/drop.
 const MINIMUM_SIZE: i32 = 8;
 
-/// When the instantiated, capture the initial dimensions and create the
-/// MouseEvent callbacks.
 impl ResizingState {
     pub fn new(
         index: usize,
@@ -540,7 +472,6 @@ impl ResizingState {
         }
     }
 
-    /// Adds the event listeners, the corollary of `Drop`.
     fn register_listeners(&self) -> ApiResult<()> {
         let mousemove = self.mousemove.as_ref().unchecked_ref();
         global::body().add_event_listener_with_callback("mousemove", mousemove)?;
@@ -548,8 +479,6 @@ impl ResizingState {
         Ok(global::body().add_event_listener_with_callback("mouseup", mouseup)?)
     }
 
-    /// Helper functions capture and release the global cursor while dragging is
-    /// occurring.
     fn capture_cursor(&mut self) -> ApiResult<()> {
         self.pointer_elem.set_pointer_capture(self.pointer_id)?;
         self.cursor = self.body_style.get_property_value("cursor")?;
@@ -562,7 +491,6 @@ impl ResizingState {
         Ok(())
     }
 
-    /// " but for release
     fn release_cursor(&self) -> ApiResult<()> {
         self.pointer_elem.release_pointer_capture(self.pointer_id)?;
         Ok(self.body_style.set_property("cursor", &self.cursor)?)

package/src/rust/{components → ui}/containers/tab_list.rs

@@ -10,22 +10,26 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use std::fmt::Display;
+
 use yew::{Callback, Children, Component, Html, Properties, classes, html};
 
-use crate::presentation::ColumnTab;
+use crate::ui::form::intl_label::{intl_content_style, intl_slug};
+
+pub trait TabItem: PartialEq + Display + Clone + Default + 'static {}
+
+impl TabItem for String {}
+
+impl TabItem for &'static str {}
 
 #[derive(Properties, Debug, PartialEq)]
-pub struct TabListProps<T: ColumnTab> {
-    /// All tabs
+pub struct TabListProps<T: TabItem> {
     pub tabs: Vec<T>,
 
-    /// Fires when the selected tab changes in the UI.
     pub on_tab_change: Callback<(usize, T)>,
 
-    // Which tab is selected.
     pub selected_tab: Option<usize>,
 
-    // The currently instantiated tabs.
     pub children: Children,
 }
 
@@ -33,12 +37,12 @@ pub enum TabListMsg {
     SetSelected(usize),
 }
 
-pub struct TabList<T: ColumnTab> {
+pub struct TabList<T: TabItem> {
     t: std::marker::PhantomData<T>,
     selected_idx: usize,
 }
 
-impl<T: ColumnTab> Component for TabList<T> {
+impl<T: TabItem> Component for TabList<T> {
     type Message = TabListMsg;
     type Properties = TabListProps<T>;
 
@@ -75,9 +79,11 @@ impl<T: ColumnTab> Component for TabList<T> {
             }
 
             let onclick = ctx.link().callback(move |_| TabListMsg::SetSelected(idx));
+            let title = tab.to_string();
+            let style = intl_content_style(&format!("{}-tab", intl_slug(&title)), &title);
             html! {
                 <span {class} {onclick}>
-                    <div class="tab-title" id={tab.to_string()} />
+                    <div class="tab-title" id={title} {style} />
                     <div class="tab-border" />
                 </span>
             }

package/src/rust/{components → ui}/context_menu.rs

@@ -13,7 +13,7 @@
 use web_sys::MouseEvent;
 use yew::prelude::*;
 
-/// A single command row in a [`ContextMenu`].
+/// A single command row in a `ContextMenu`.
 #[derive(Clone, PartialEq)]
 pub struct ContextMenuItem {
     pub label: String,
@@ -21,17 +21,19 @@ pub struct ContextMenuItem {
     pub disabled: bool,
 }
 
-/// A row in a [`ContextMenu`]: a plain command [`ContextMenuItem`], a
+/// A row in a `ContextMenu`: a plain command `ContextMenuItem`, a
 /// non-interactive group label, or a row with a hover-opened sub-menu flyout.
 #[derive(Clone, PartialEq)]
 pub enum ContextMenuEntry {
     Item(ContextMenuItem),
     Header(String),
+
+    /// Arbitrary content rendered in place, whose own handlers must close
+    /// the menu.
+    Custom(Html),
     Submenu {
         label: String,
 
-        /// Click-through command for the parent row itself (`None` makes the
-        /// row hover-only).
         on_select: Option<Callback<()>>,
         entries: Vec<ContextMenuEntry>,
     },
@@ -41,19 +43,11 @@ pub enum ContextMenuEntry {
 pub struct ContextMenuProps {
     pub entries: Vec<ContextMenuEntry>,
 
-    /// Fired after an item is selected. Outside-click dismissal is the
-    /// enclosing `PortalModal`'s job (blur), not this component's.
     #[prop_or_default]
     pub on_close: Callback<()>,
 }
 
-/// The command-item list of a panel context menu. Purely presentational — the
-/// command set is supplied by the parent as plain [`Callback`]s, and
-/// positioning/dismissal/theming belong to the enclosing `PortalModal` (the
-/// same body-mounted, `theme`-attributed delivery as the Export/Copy menus).
-/// Sub-menus are CSS-only `:hover` flyouts nested inside their parent row, so
-/// they live inside the same `PortalModal` host (focus never leaves it) and
-/// selection routes through the same `on_select` + `on_close` path.
+/// The command-item list of a panel context menu.
 pub struct ContextMenu;
 
 impl Component for ContextMenu {
@@ -101,6 +95,7 @@ fn render_entry(entry: &ContextMenuEntry, on_close: &Callback<()>) -> Html {
         ContextMenuEntry::Header(label) => {
             html! { <span class="context-menu-header">{ label.clone() }</span> }
         },
+        ContextMenuEntry::Custom(content) => content.clone(),
         ContextMenuEntry::Submenu {
             label,
             on_select,

package/src/rust/{presentation/drag_helpers.rs → ui/dragdrop.rs}

@@ -22,10 +22,31 @@ use yew::prelude::*;
 use crate::js::{IntersectionObserver, IntersectionObserverEntry};
 
 pub type DragEndCallback = Closure<dyn FnMut(DragEvent)>;
+pub type PointerDownCallback = Closure<dyn FnMut(PointerEvent)>;
+
+pub fn closest_draggable(event: &Event) -> Option<HtmlElement> {
+    event
+        .composed_path()
+        .get(0)
+        .dyn_into::<Element>()
+        .ok()?
+        .closest("[draggable=\"true\"]")
+        .ok()
+        .flatten()?
+        .dyn_into::<HtmlElement>()
+        .ok()
+}
+
+pub fn clear_document_selection() -> ApiResult<()> {
+    if let Some(selection) = global::window().get_selection()?
+        && !selection.is_collapsed()
+    {
+        selection.remove_all_ranges()?;
+    }
+
+    Ok(())
+}
 
-/// Safari does not set `relatedTarget` on `"dragleave"`, which makes it
-/// impossible to determine whether a logical drag leave has happened with just
-/// this event, so use function on `"dragenter"` to capture the `relatedTarget`.
 pub fn dragenter_helper(callback: impl Fn() + 'static, target: NodeRef) -> Callback<DragEvent> {
     Callback::from({
         move |event: DragEvent| {
@@ -51,9 +72,6 @@ pub fn dragenter_helper(callback: impl Fn() + 'static, target: NodeRef) -> Callb
     })
 }
 
-/// HTML drag/drop will fire a bubbling `dragleave` event over all children of a
-/// `dragleave`-listened-to element, so we need to filter out the events from
-/// the children elements with this esoteric DOM arcana.
 pub fn dragleave_helper(callback: impl Fn() + 'static, drag_ref: NodeRef) -> Callback<DragEvent> {
     Callback::from({
         clone!(drag_ref);
@@ -67,23 +85,6 @@ pub fn dragleave_helper(callback: impl Fn() + 'static, drag_ref: NodeRef) -> Cal
                     .or_else(|| Some(JsValue::UNDEFINED.unchecked_into::<EventTarget>()))
                     .and_then(|x| x.dyn_into::<Element>().ok());
 
-                // This is a wild chrome bug. `dragleave` can fire with the `relatedTarget`
-                // property set to an element inside the closed `ShadowRoot` hosted by a
-                // browser-native `<select>` tag, which fails the `.contains()` check
-                // below.  This mystery `ShadowRoot` has a structure that looks like this
-                // (tested in Chrome 92), which we try to detect as best we can below.
-                //
-                // ```html
-                // <div aria-hidden="true">Selected Text Here</siv>
-                // <slot name="user-agent-custom-assign-slot"></slot>
-                // ```
-                //
-                // This is pretty course though, since there is no guarantee this structure
-                // will be maintained in future Chrome versions; the `.expect()` in this
-                // method chain should at least warn us if this regresses.
-                //
-                // Wait - you don't believe me?  Throw a debugger statement inside this
-                // conditional and drag a column over a pivot-mode active columns list.
                 if related_target
                     .as_ref()
                     .map(|x| x.has_attribute("aria-hidden"))
@@ -104,8 +105,6 @@ pub fn dragleave_helper(callback: impl Fn() + 'static, drag_ref: NodeRef) -> Cal
                 let current_target = drag_ref.cast::<HtmlElement>().unwrap();
                 match related_target {
                     Some(ref related) => {
-                        // Due to virtual dom these events sometimes fire after
-                        // the node is removed ...
                         if !current_target.contains(Some(related))
                             && related.parent_element().is_some()
                         {
@@ -113,8 +112,6 @@ pub fn dragleave_helper(callback: impl Fn() + 'static, drag_ref: NodeRef) -> Cal
                         }
                     },
                     None => {
-                        // Safari (OSX and iOS) don't set `relatedTarget`, so we need to
-                        // read a memoized value from the `"dragenter"` event.
                         let dataset = current_target.dataset();
                         if dataset.get("safaridragleave").is_some() {
                             dataset.delete("safaridragleave");
@@ -151,9 +148,7 @@ impl DragDropContainer {
     }
 }
 
-/// A really, really unfortunate hack that is needed to guarantee that `dragend`
-/// is called even under aggressive DOM mutation after `dragstart` is fired.
-pub(super) struct DragTargetState {
+pub struct DragTargetState {
     target: HtmlElement,
     shadow_root: ShadowRoot,
     alive: Rc<Cell<bool>>,
@@ -161,7 +156,7 @@ pub(super) struct DragTargetState {
 }
 
 impl DragTargetState {
-    pub(super) fn new(host: HtmlElement, target: HtmlElement) -> Self {
+    pub fn new(host: HtmlElement, target: HtmlElement) -> Self {
         let shadow_root = host.shadow_root().unwrap();
         let alive = Rc::new(Cell::new(true));
         let observer = IntersectionObserver::new(

package/src/rust/{components → ui}/font_loader.rs

@@ -24,18 +24,10 @@ use yew::prelude::*;
 
 use crate::utils::*;
 
-/// This test string is injected into the DOM with the target `font-family`
-/// applied. It is important for this string to contain the correct unicode
-/// range, as otherwise the browser may download the latin-only variant of the
-/// font which will later be invalidated.
 const FONT_TEST_SAMPLE: &str = "ABCDΔ";
 
-/// How long to wait for the test string to receive the font before proceeding
-/// anyway (with a consoel warning).
 const FONT_DOWNLOAD_TIMEOUT_MS: i32 = 1000;
 
-/// `state` is private to force construction of props with the `::new()` static
-/// method, which initializes the async `load_fonts_task()` method.
 #[derive(Clone, Properties)]
 pub struct FontLoaderProps {
     state: Rc<FontLoaderState>,
@@ -105,8 +97,6 @@ impl FontLoaderProps {
         self.state.fonts.borrow()
     }
 
-    /// We only want errors in this task to warn, since they are not necessarily
-    /// error conditions and mainly of interest to developers.
     async fn load_fonts_task_safe(self) -> ApiResult<JsValue> {
         if let Err(msg) = self.load_fonts_task().await {
             web_sys::console::warn_1(&msg.into());
@@ -115,13 +105,6 @@ impl FontLoaderProps {
         Ok(JsValue::UNDEFINED)
     }
 
-    /// Awaits loading of a required set of font/weight pairs, given an element
-    /// with a CSS variable of the format:
-    /// ```css
-    /// perspective-viewer {
-    ///     --preload-fonts: "Roboto Mono:200;Open Sans:300,400";
-    /// }
-    /// ```
     async fn load_fonts_task(self) -> ApiResult<JsValue> {
         await_dom_loaded().await?;
         let txt = global::window()
@@ -143,7 +126,6 @@ impl FontLoaderProps {
                 let font_face = js_sys::Reflect::get(&entry, &intern("value").into())?
                     .dyn_into::<web_sys::FontFace>()?;
 
-                // Safari always has to be "different".
                 if family == &font_face.family().replace('"', "")
                     && (weight == &font_face.weight()
                         || (font_face.weight() == "normal" && weight == "400"))
@@ -174,8 +156,6 @@ impl FontLoaderProps {
     }
 }
 
-// An async task which times out.  Can be used to timeout an optional async task
-// by combinging with `Promise::any`.
 fn timeout_font_task(
     family: &str,
     weight: &str,
@@ -187,9 +167,6 @@ fn timeout_font_task(
     }
 }
 
-/// Generates a `<span>` for a specific font family and weight with `opacity:0`,
-/// since not all of the fonts may be shown and when e.g. the settings panel is
-/// closed, and this will defer font loading.
 fn font_test_html((family, weight): &(String, String)) -> Html {
     let style = format!("opacity:0;font-family:\"{family}\";font-weight:{weight}");
 
@@ -208,7 +185,6 @@ fn parse_font(txt: &str) -> Option<Vec<(String, String)>> {
     }
 }
 
-/// Parse a `--preload-fonts` value into (Family, Weight) tuples.
 fn parse_fonts(txt: &str) -> Vec<(String, String)> {
     let trim = txt.trim();
     let trim = if trim.len() > 2 {
@@ -223,8 +199,6 @@ fn parse_fonts(txt: &str) -> Vec<(String, String)> {
         .collect::<Vec<_>>()
 }
 
-/// wasm_bindgen doesn't fully implement `FontFaceIterator`, but this is
-/// basically how it would be implemented if it was.
 fn font_iter(
     iter: web_sys::FontFaceSetIterator,
 ) -> impl Iterator<Item = web_sys::FontFaceSetIteratorResult> {

package/src/rust/{components → ui}/form/color_selector.rs

@@ -14,6 +14,8 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
+use crate::ui::form::intl_label::IntlLabel;
+
 #[derive(Properties, PartialEq)]
 pub struct ColorProps {
     pub color: String,
@@ -22,7 +24,7 @@ pub struct ColorProps {
     pub is_modified: bool,
 
     #[prop_or_default]
-    pub title: Option<String>,
+    pub label: Option<String>,
 }
 
 #[function_component(ColorSelector)]
@@ -42,7 +44,7 @@ pub fn color_component(props: &ColorProps) -> Html {
 
     html! {
         <>
-            <label id={props.title.as_deref().unwrap_or("color-label").to_owned()} />
+            <IntlLabel name={props.label.clone().unwrap_or_else(|| "color".to_owned())} />
             <div class="color-gradient-container">
                 <input class="parameter" type="color" value={props.color.to_owned()} {oninput} />
                 if props.is_modified {

package/src/rust/ui/form/intl_label.rs

@@ -0,0 +1,81 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::prelude::*;
+
+/// Lowercases `key` and folds every other character to `-`, producing the
+/// middle segment of a `--psp-label--{slug}--content` intl variable name.
+pub fn intl_slug(key: &str) -> String {
+    key.chars()
+        .map(|x| {
+            if x.is_ascii_alphanumeric() {
+                x.to_ascii_lowercase()
+            } else {
+                '-'
+            }
+        })
+        .collect()
+}
+
+fn humanize(key: &str) -> String {
+    let mut out = String::with_capacity(key.len());
+    for x in key.chars() {
+        if x.is_alphanumeric() {
+            if out.is_empty() {
+                out.extend(x.to_uppercase());
+            } else {
+                out.push(x);
+            }
+        } else if matches!(x, '_' | '-') || x.is_whitespace() {
+            out.push(' ');
+        }
+    }
+
+    out
+}
+
+/// The inline `style` that routes an element's `:before` text through the intl
+/// indirection: `--psp-label--content` is set to a reference to
+/// `--psp-label--{var}--content`, falling back to `fallback`, and a generic
+/// stylesheet rule renders it.
+pub fn intl_content_style(var: &str, fallback: &str) -> String {
+    format!("--psp-label--content: var(--psp-label--{var}--content, \"{fallback}\")")
+}
+
+#[derive(Properties, PartialEq)]
+pub struct IntlLabelProps {
+    pub name: String,
+
+    #[prop_or_default]
+    pub group: bool,
+
+    #[prop_or_default]
+    pub class: Classes,
+}
+
+/// A `<label>` whose text is the intl string for a schema key.
+#[function_component(IntlLabel)]
+pub fn intl_label(props: &IntlLabelProps) -> Html {
+    let slug = intl_slug(&props.name);
+    let (id, var) = if props.group {
+        (
+            format!("{}-group-label", props.name),
+            format!("group-{slug}"),
+        )
+    } else {
+        (format!("{}-label", props.name), slug)
+    };
+
+    let style = intl_content_style(&var, &humanize(&props.name));
+    let class = classes!("intl-label", props.class.clone());
+    html! { <label {class} {id} {style} /> }
+}