@pathscale/ui 3.0.0 → 3.2.0

package/dist/components/card/Card.generated.js

@@ -1,10 +1,12 @@
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { claimElement, createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "../_shared/material.css";
 import "./Card.css";
 import { Show } from "solid-js";
+import { buttonHref, buttonRel } from "../button/Button.interactions.js";
+import { cardSemantics } from "./Card.interactions.js";
 import { card, cardBody, cardFooter, cardHeader } from "./Card.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!><!>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<a>");
 const __solidLayoutCardHeaderLayout = (_stable, p)=>(()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(()=>_stable.slot.root), true);
@@ -48,62 +50,111 @@ const CardFooterLayout = defineComponent({
     ]
 });
 const __solidLayoutCardLayout = (_stable, p)=>{
+    const semantics = ()=>cardSemantics({
+            href: p.href,
+            isInteractive: p.isInteractive,
+            hasActivation: null != p.onClick,
+            role: p.role,
+            tabindex: p.tabindex
+        });
     const handleKeyDown = (event)=>{
-        if (!p.isInteractive) return;
+        if (!semantics().handlesKeyboardActivation) return;
         if ("Enter" !== event.key && " " !== event.key) return;
         if (event.target !== event.currentTarget) return;
         event.preventDefault();
         event.currentTarget.click();
     };
-    var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling;
-    spread(_el$4, mergeProps(()=>_stable.slot.root, {
-        get role () {
-            return p.role ?? (p.isInteractive ? "button" : void 0);
-        },
-        get tabindex () {
-            return p.tabindex ?? (p.isInteractive ? 0 : void 0);
-        },
-        onKeyDown: handleKeyDown,
-        get ["data-flavor"] () {
-            return p.flavor ?? "neutral";
-        },
-        get ["data-material"] () {
-            return p.material ?? "solid";
-        },
-        get ["data-material-explicit"] () {
-            return p.material ? "" : void 0;
-        }
-    }), true);
-    insert(_el$4, createComponent(Show, {
-        get when () {
-            return p.header;
-        },
-        get children () {
-            return createComponent(CardHeaderLayout, {
-                get children () {
+    const body = ()=>[
+            createComponent(Show, {
+                get when () {
                     return p.header;
+                },
+                get children () {
+                    return createComponent(CardHeaderLayout, {
+                        get children () {
+                            return p.header;
+                        }
+                    });
                 }
-            });
-        }
-    }), _el$5);
-    insert(_el$4, createComponent(CardBodyLayout, {
-        get children () {
-            return _stable.children;
-        }
-    }), _el$6);
-    insert(_el$4, createComponent(Show, {
+            }),
+            createComponent(CardBodyLayout, {
+                get children () {
+                    return _stable.children;
+                }
+            }),
+            createComponent(Show, {
+                get when () {
+                    return p.footer;
+                },
+                get children () {
+                    return createComponent(CardFooterLayout, {
+                        get children () {
+                            return p.footer;
+                        }
+                    });
+                }
+            })
+        ];
+    return createComponent(Show, {
         get when () {
-            return p.footer;
+            return "a" === semantics().element;
+        },
+        get fallback () {
+            var _el$5 = _tmpl$();
+            spread(_el$5, mergeProps(()=>_stable.slot.root, {
+                get role () {
+                    return semantics().role;
+                },
+                get tabindex () {
+                    return semantics().tabindex;
+                },
+                onKeyDown: handleKeyDown,
+                get ["data-flavor"] () {
+                    return p.flavor ?? "neutral";
+                },
+                get ["data-material"] () {
+                    return p.material ?? "solid";
+                },
+                get ["data-material-explicit"] () {
+                    return p.material ? "" : void 0;
+                }
+            }), true);
+            insert(_el$5, body);
+            return _el$5;
         },
         get children () {
-            return createComponent(CardFooterLayout, {
-                get children () {
-                    return p.footer;
+            var _el$4 = _tmpl$2();
+            claimElement(_el$4);
+            spread(_el$4, mergeProps(()=>_stable.slot.root, {
+                get href () {
+                    return buttonHref(p.href, false);
+                },
+                get target () {
+                    return p.target;
+                },
+                get rel () {
+                    return buttonRel(p.rel, p.target);
+                },
+                get role () {
+                    return semantics().role;
+                },
+                get tabindex () {
+                    return semantics().tabindex;
+                },
+                get ["data-flavor"] () {
+                    return p.flavor ?? "neutral";
+                },
+                get ["data-material"] () {
+                    return p.material ?? "solid";
+                },
+                get ["data-material-explicit"] () {
+                    return p.material ? "" : void 0;
                 }
-            });
+            }), true);
+            insert(_el$4, body);
+            return _el$4;
         }
-    }), _el$7);
-    return _el$4;
+    });
 };
 const CardLayout = defineComponent({
     recipe: card,
@@ -118,6 +169,9 @@ const CardLayout = defineComponent({
         "padding",
         "radius",
         "isInteractive",
+        "href",
+        "target",
+        "rel",
         "header",
         "footer",
         "children"

package/dist/components/card/Card.interactions.d.ts

@@ -0,0 +1,70 @@
+/**
+ * What an interactive card *is*, as one function.
+ *
+ * `isInteractive` gave a card `role="button"` and `tabindex="0"` with no way
+ * off either. That is right for a card that is the only activatable thing in
+ * its box, and wrong the moment a card is put inside a link, which is the
+ * ordinary way to make a whole card navigate. Measured on one site: every card
+ * on it was a `button` inside a `link`, same name, same box. Nested
+ * interactive content is invalid HTML, a reader hears the card twice, and a
+ * press by coordinate lands on whichever of the two is on top.
+ *
+ * Three things come out of this, and the first is what fixes the sites without
+ * anyone editing a call site. A card is announced as a button when it looks
+ * pressable *and has something to press*: `<a href><Card isInteractive /></a>`
+ * hands the card no handler, because the anchor is what navigates, so the card
+ * stops claiming to be a button and the nesting goes away where it stands.
+ * `isInteractive` was doing two jobs at once and only one of them survives
+ * inside a link: it is how a card asks for hover and press affordance, which is
+ * exactly what a card inside a link wants, and all it wants.
+ *
+ * The second is `href`: a card that navigates should *be* the anchor rather
+ * than sit inside one, exactly as `Button` already does. The third is an
+ * explicit `role`, which was accepted and then half-ignored --
+ * `role="presentation"` left `tabindex="0"` behind, so the escape hatch
+ * produced a presentational element that was still in the tab order and still
+ * announced as focusable.
+ *
+ * A `.layout.tsx` binds free identifiers to props, so the rule lives beside
+ * the markup rather than inside it, and the repository's tests are pure.
+ */
+import type { JSX } from "@solidjs/web";
+type RoleAttribute = JSX.HTMLAttributes<HTMLElement>["role"];
+type TabIndexAttribute = JSX.HTMLAttributes<HTMLElement>["tabindex"];
+type Role = Exclude<RoleAttribute, false | undefined>;
+type TabIndex = Exclude<TabIndexAttribute, false | undefined>;
+export type CardSemanticsInput = {
+    href?: string | false;
+    isInteractive?: boolean;
+    /**
+     * Whether the card has an activation of its own.
+     *
+     * This is the half that fixes the fleet without anyone editing a call site.
+     * `<a href><Card isInteractive /></a>` gives the card no handler: the anchor
+     * is what navigates. A card with nothing to activate is not a button, so it
+     * stops claiming to be one, and the nesting goes away where it is.
+     *
+     * `isInteractive` alone was read as "announce this as a button", and it
+     * cannot be: it is also how a card asks for hover and press *affordance*,
+     * which is exactly what a card inside a link wants and all it wants.
+     */
+    hasActivation?: boolean;
+    /** An explicit `role` from the call site. Wins outright. */
+    role?: RoleAttribute;
+    /** An explicit `tabindex` from the call site. Wins outright. */
+    tabindex?: TabIndexAttribute;
+};
+export type CardSemantics = {
+    element: "a" | "div";
+    role: Role | undefined;
+    tabindex: TabIndex | undefined;
+    /**
+     * Whether the card has to implement Enter and Space itself.
+     *
+     * Only a `div` wearing `role="button"` does. An anchor activates on Enter
+     * natively, and a presentational card activates on nothing.
+     */
+    handlesKeyboardActivation: boolean;
+};
+export declare const cardSemantics: (input: CardSemanticsInput) => CardSemantics;
+export {};

package/dist/components/card/Card.interactions.js

@@ -0,0 +1,19 @@
+const given = (value)=>false === value || void 0 === value ? void 0 : value;
+const cardSemantics = (input)=>{
+    const role = given(input.role);
+    const tabindex = given(input.tabindex);
+    if ("string" == typeof input.href) return {
+        element: "a",
+        role,
+        tabindex,
+        handlesKeyboardActivation: false
+    };
+    const resolvedRole = role ?? (input.isInteractive && input.hasActivation ? "button" : void 0);
+    return {
+        element: "div",
+        role: resolvedRole,
+        tabindex: tabindex ?? ("button" === resolvedRole ? 0 : void 0),
+        handlesKeyboardActivation: "button" === resolvedRole
+    };
+};
+export { cardSemantics };

package/dist/components/card/index.d.ts

@@ -11,6 +11,6 @@ declare const Card: import("solid-js").Component<import("./Card.generated").Card
     Content: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
     Footer: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
 };
-export type { CardElevation, CardMaterial, CardProps, CardSectionProps, } from "./Card.generated";
+export type { CardElevation, CardMaterial, CardState, CardProps, CardSectionProps, } from "./Card.generated";
 export { card, cardBody, cardFooter, cardHeader } from "./Card.recipe";
 export { Card as default, Card, CardBodyLayout as CardBody, CardFooterLayout as CardFooter, CardHeaderLayout as CardHeader, };

package/dist/components/checkbox/Checkbox.generated.d.ts

@@ -1,9 +1,9 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Checkbox.css";
 import type { JSX } from "@solidjs/web";
-import type { UIBaseProps, State, Issue } from "../vocabulary";
+import type { Issue, State, UIBaseProps } from "../vocabulary";
 export type CheckboxVariant = "primary" | "secondary";
-export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & UIBaseProps & {
+export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "onChange"> & UIBaseProps & {
     defaultChecked?: boolean;
     children?: JSX.Element;
     description?: JSX.Element;
@@ -12,6 +12,27 @@ export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "typ
     isIndeterminate?: boolean;
     indeterminate?: boolean;
     variant?: CheckboxVariant;
+    /**
+     * The new checked state.
+     *
+     * **Breaking in 3.1.** This was the input's native `onChange`, handing you
+     * an `Event`, while `Slider`, `RadioGroup` and `CheckboxGroup` handed you a
+     * value under the same name. Every control now reports its value here.
+     *
+     * Fires for a checkbox inside a `CheckboxGroup` too, reporting this box's
+     * own state; the group separately reports the whole selection through its
+     * own `onChange`.
+     *
+     * The native handler is {@link onNativeChange}.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The underlying `change` event, before the toggle is applied.
+     *
+     * `preventDefault()` here leaves the box as it was, suppresses
+     * {@link onChange}, and does not notify an enclosing group.
+     */
+    onNativeChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
 };
 declare const Checkbox: __LayoutComponent<CheckboxProps>;
 export default Checkbox;

package/dist/components/checkbox/Checkbox.generated.js

@@ -4,8 +4,8 @@ import "./Checkbox.css";
 import { Show, createSignal, createTrackedEffect, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CheckboxGroupContext } from "../checkbox-group/context.js";
-import { CLASSES, componentRecipe } from "./Checkbox.recipe.js";
 import { resolveState } from "../vocabulary.js";
+import { CLASSES, componentRecipe } from "./Checkbox.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=checkbox-default-indicator--indeterminate fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-width=3 viewBox="0 0 24 24"><line x1=21 x2=3 y1=12 y2=12>'), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$5 = /*#__PURE__*/ template("<label><input><span><span>"), _tmpl$6 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=checkbox-default-indicator--checkmark fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox="0 0 17 18"><polyline points="1 9 7 14 15 4">');
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -14,7 +14,7 @@ const invokeEventHandler = (handler, event)=>{
 const __solidLayoutCheckbox = (_stable, p)=>{
     let inputRef;
     const group = useContext(CheckboxGroupContext);
-    const others = omit(p, "class", "children", "description", "state", "issues", "isIndeterminate", "indeterminate", "variant", "checked", "defaultChecked", "value", "name", "disabled", "onChange", "dataTheme", "aria-invalid");
+    const others = omit(p, "class", "children", "description", "state", "issues", "isIndeterminate", "indeterminate", "variant", "checked", "defaultChecked", "value", "name", "disabled", "onChange", "onNativeChange", "dataTheme", "aria-invalid");
     const [internalSelected, setInternalSelected] = createSignal(Boolean(p.defaultChecked));
     const isControlled = ()=>void 0 !== p.checked;
     const optionValue = ()=>null != p.value ? String(p.value) : void 0;
@@ -31,11 +31,17 @@ const __solidLayoutCheckbox = (_stable, p)=>{
         inputRef.indeterminate = isIndeterminate();
     });
     const handleChange = (event)=>{
-        invokeEventHandler(p.onChange, event);
+        invokeEventHandler(p.onNativeChange, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
-        if (group && void 0 !== optionValue()) return void group.toggleValue(optionValue(), event.currentTarget.checked, event);
-        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+        const checked = event.currentTarget.checked;
+        if (group && void 0 !== optionValue()) {
+            group.toggleValue(optionValue(), checked, event);
+            p.onChange?.(checked);
+            return;
+        }
+        if (!isControlled()) setInternalSelected(checked);
+        p.onChange?.(checked);
     };
     var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
     spread(_el$, mergeProps(()=>({
@@ -168,7 +174,9 @@ const Checkbox = defineComponent({
         "issues",
         "isIndeterminate",
         "indeterminate",
-        "variant"
+        "variant",
+        "onChange",
+        "onNativeChange"
     ]
 });
 const Checkbox_generated = Checkbox;

package/dist/components/collapsible/Collapsible.css

@@ -50,19 +50,35 @@
     transform: rotate(-180deg);
   }
 
+  /*
+   * A closed panel is out of the page, not merely flattened. Same fault and
+   * same fix as `.accordion__content`: `keepMounted` is the default, so a
+   * closed panel stays in the document carrying `aria-hidden="true"` while
+   * everything inside it kept `visibility: visible` and stayed in the tab
+   * order. Tab moved focus into a panel nobody can see, inside an
+   * `aria-hidden` subtree, which is the one thing `aria-hidden` must never
+   * contain.
+   */
   .collapsible__content {
     display: grid;
     grid-template-rows: 0fr;
     opacity: 0;
     overflow: hidden;
+    visibility: hidden;
     transition:
       grid-template-rows 200ms ease,
-      opacity 200ms ease;
+      opacity 200ms ease,
+      visibility 0s linear 200ms;
   }
 
   .collapsible__content[data-expanded="true"] {
     grid-template-rows: 1fr;
     opacity: 1;
+    visibility: visible;
+    transition:
+      grid-template-rows 200ms ease,
+      opacity 200ms ease,
+      visibility 0s linear 0s;
   }
 
   .collapsible__body {

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.d.ts

@@ -1,5 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorWheelFlower.css";
+import { type ColorValue } from "./ColorUtils";
 import { type ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
 export interface ColorWheelFlowerProps {
     /** Stable base for the flower and each interactive petal. */
@@ -9,6 +10,13 @@ export interface ColorWheelFlowerProps {
     mode?: ColorWheelFlowerMode;
     /** Exactly 31 literal colors, ordered outer ring, middle ring, inner ring, center. */
     palette?: readonly string[];
+    /** Controlled selection. A hex, `rgb()` or `hsl()` string, or a parsed value. */
+    color?: ColorValue | string;
+    /** Initial selection when uncontrolled. */
+    defaultColor?: ColorValue | string;
+    disabled?: boolean;
+    /** The colour a petal was clicked to choose. */
+    onChange?: (color: ColorValue) => void;
 }
 declare const ColorWheelFlower: __LayoutComponent<ColorWheelFlowerProps>;
 export default ColorWheelFlower;

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -231,7 +231,20 @@ function buildColors(palette) {
 }
 const CENTER_INDEX = LAYOUT.findIndex((l)=>l.isCenter);
 const __solidLayoutColorWheelFlower = (_stable, p)=>{
-    const context = useColorPickerContext();
+    const providedContext = useColorPickerContext();
+    const toColorValue = (value)=>void 0 === value ? null : "string" == typeof value ? parseColor(value) : value;
+    const WHITE = createColorFromHsl(0, 0, 100, 1);
+    const [standaloneColor, setStandaloneColor] = createSignal(toColorValue(p.defaultColor) ?? WHITE);
+    const context = providedContext ?? {
+        color: ()=>toColorValue(p.color) ?? standaloneColor(),
+        format: ()=>"hex",
+        disabled: ()=>Boolean(p.disabled),
+        onChange: (next)=>{
+            if (void 0 === p.color) setStandaloneColor(next);
+            p.onChange?.(next);
+        },
+        onFormatChange: ()=>{}
+    };
     const [selectedIndex, setSelectedIndex] = createSignal(null);
     const [pulseState, setPulseState] = createSignal(null);
     const [currentTheme, setCurrentTheme] = createSignal("u" > typeof document && "dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light");

package/dist/components/color-wheel-flower/colorWheelFlowerContext.d.ts

@@ -7,5 +7,12 @@ export interface ColorPickerContextType {
     onChange: (color: ColorValue) => void;
     onFormatChange: (format: ColorFormat) => void;
 }
-export declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextType | undefined>;
-export declare function useColorPickerContext(): ColorPickerContextType;
+export declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextType | null>;
+/**
+ * The surrounding picker's state, or `null` when there is no picker.
+ *
+ * Returning `null` rather than throwing is deliberate: a consumer that can
+ * stand alone decides for itself what to do without a provider, and one that
+ * genuinely cannot say so in its own words.
+ */
+export declare function useColorPickerContext(): ColorPickerContextType | null;

package/dist/components/color-wheel-flower/colorWheelFlowerContext.js

@@ -1,8 +1,6 @@
 import { createContext, useContext } from "solid-js";
-const ColorPickerContext = createContext(void 0);
+const ColorPickerContext = createContext(null);
 function useColorPickerContext() {
-    const context = useContext(ColorPickerContext);
-    if (!context) throw new Error("useColorPickerContext must be used within a ColorPickerContext.Provider");
-    return context;
+    return useContext(ColorPickerContext);
 }
 export { ColorPickerContext, useColorPickerContext };

package/dist/components/connection-settings/ConnectionSettings.css

@@ -0,0 +1,76 @@
+@layer components {
+  .connection-settings {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .connection-settings__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .connection-settings__title {
+    font-weight: 500;
+  }
+
+  .connection-settings__description {
+    font-size: 0.875rem;
+    opacity: 0.7;
+  }
+
+  /*
+   * The fields are absent from the tree while closed rather than hidden. A
+   * reveal that only sets `display: none` reads as present to anything driving
+   * the renderer, so a broken toggle still looks like it worked.
+   */
+  .connection-settings__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .connection-settings__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .connection-settings__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .connection-settings__input {
+    width: 100%;
+  }
+
+  .connection-settings__hint {
+    font-size: 0.875rem;
+    opacity: 0.7;
+  }
+
+  .connection-settings__current {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    opacity: 0.6;
+  }
+
+  .connection-settings__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  /* `data-applying`, not a class: the flag is this component's own runtime
+     state, not a prop, so a recipe prop could never be driven by it. State
+     attributes are what the library documents for exactly this. */
+  .connection-settings[data-applying="true"] .connection-settings__actions {
+    opacity: 0.6;
+  }
+}

package/dist/components/connection-settings/ConnectionSettings.generated.d.ts

@@ -0,0 +1,45 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ConnectionSettings.css";
+import type { JSX } from "@solidjs/web";
+import type { ConnectionSettingsStore } from "../../hooks/connection";
+import type { UIBaseProps } from "../vocabulary";
+/** One backend, as this panel presents it. `name` matches the store's endpoint. */
+export type ConnectionSettingsEndpointLabel = {
+    name: string;
+    label: string;
+    /** Shown under the field. The place to say what the default is for. */
+    hint?: string;
+    placeholder?: string;
+};
+export type ConnectionSettingsLabels = {
+    /** The switch's own label. */
+    useCustom: string;
+    useCustomDescription?: string;
+    appPublicId?: string;
+    save: string;
+    reset: string;
+    /** Prefix for the read-only "this is where you are pointed" lines. */
+    current?: string;
+};
+export type ConnectionSettingsProps = Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & UIBaseProps & {
+    /** From `createConnectionSettings`. The panel reads and writes it directly. */
+    store: ConnectionSettingsStore;
+    endpoints: readonly ConnectionSettingsEndpointLabel[];
+    labels: ConnectionSettingsLabels;
+    /** Omit to hide the app id field entirely. */
+    showAppPublicId?: boolean;
+    /**
+     * Rendered inside the revealed region, after the endpoint fields.
+     *
+     * Every site has one field the others do not: an app id, a second backend,
+     * a network selector. Putting them here keeps them inside the same reveal
+     * instead of forcing a second copy of the panel.
+     */
+    children?: JSX.Element;
+    /** Called after the store has applied. For a toast, or navigation. */
+    onSaved?: () => void;
+    /** Called when applying threw. The panel also shows the message itself. */
+    onSaveFailed?: (error: unknown) => void;
+    onResetDone?: () => void;
+};
+export declare const ConnectionSettingsLayout: __LayoutComponent<ConnectionSettingsProps>;