@estiva-app/ui 0.35.2 → 0.37.0

package/dist/Panel.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode, Ref, UIEventHandler } from 'react';
+/**
+ * A panel of a page: its name in a `ContainerHeader`, a body under it that
+ * scrolls whenever it is taller than the room it has, and, when there is one,
+ * a row fixed at the bottom that never scrolls — a reply box.
+ *
+ * Made so that scrolling comes from the package, not from each app remembering
+ * it (Katerina, 26 September 2026). The apps built their panels from the
+ * package's header and a box of their own, and a box without a `ScrollArea`
+ * simply cut off what did not fit: Peek's widget panel on a Ship file lost the
+ * end of a long description and the status control under it, with no bar and
+ * nothing to scroll. Here the body is always a `ScrollArea`, so the bar shows
+ * as soon as there is more, and an empty panel or a short one has none.
+ *
+ * It takes the room its column gives it (`flex-1 min-h-0`), never its content's
+ * height, so the body is what scrolls, not the page. Two panels in one column
+ * share it; a `max-h-*` in `className` caps one of them.
+ *
+ * It keeps a crash inside itself, as ListColumn does: if its body, its actions
+ * or its footer break, the panel keeps its title and shows `ErrorBoundary`'s
+ * message in the room the body had.
+ */
+export interface PanelProps {
+    /** The panel's name, in its header. A node for a title that is more than words. */
+    title: ReactNode;
+    /** A chevron after the title, as `ContainerHeader` draws it. */
+    chevron?: boolean;
+    /** The panel's own actions, at the header's right — a `Toolbar` of `ToolbarButton`s, or one `IconButton`. */
+    actions?: ReactNode;
+    /** The body. It scrolls when it is taller than the panel. */
+    children: ReactNode;
+    /** A row fixed under the body that never scrolls — a reply box. */
+    footer?: ReactNode;
+    /** The body's own box: its padding, gap and layout — `px-4 pt-3 pb-4`, `flex flex-col gap-2`. */
+    bodyClassName?: string;
+    /** The body's scrolling box, for a panel that reads or drives its scroll: a thread that opens at its newest reply. */
+    bodyRef?: Ref<HTMLDivElement>;
+    /** Fires as the body scrolls. */
+    onBodyScroll?: UIEventHandler<HTMLDivElement>;
+    /** Placement only: a cap such as `max-h-[60%]` when it shares a column. */
+    className?: string;
+}
+export declare function Panel(props: PanelProps): import("react").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAM3D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,UAAU;IACzB,mFAAmF;IACnF,KAAK,EAAE,SAAS,CAAA;IAChB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAA;IACnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sHAAsH;IACtH,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IAC7C,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BActC"}

package/dist/ScrollArea.d.ts

@@ -7,8 +7,13 @@ import type { ReactNode, Ref, UIEventHandler } from 'react';
  * right-hand padding looks wider than the left. Katerina saw it in every
  * scrolling surface of both apps (2026-09-08). Base UI's `ScrollArea` hides
  * the native bar and draws its own over the content, so nothing moves when
- * it appears; the bar shows while the pointer is over the region or the
- * content is moving, and fades otherwise.
+ * it appears.
+ *
+ * The bar shows whenever the region has more to scroll to, at rest too
+ * (Katerina, 26 September: a long folder list in Peek's side column looked
+ * complete, because the bar waited for the pointer). Base UI writes
+ * `data-has-overflow-y` / `-x` on the bar while that axis overflows; a region
+ * with nothing more to show keeps no bar at all.
  *
  * Three boxes, and each class prop lands on one:
  *

package/dist/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../src/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IACzC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAKD,wBAAgB,UAAU,CAAC,EAAE,WAAwB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA4CxJ"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../src/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IACzC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAKD,wBAAgB,UAAU,CAAC,EAAE,WAAwB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA4CxJ"}

package/dist/eslint/escape.d.ts

@@ -3,15 +3,21 @@ import type { AST, Rule } from 'eslint';
  * The escape marker (UIG-3, seam S4 in docs/GATES.md §16): one written reason
  * why one element stays as it is.
  *
- * A line comment directly above the element,
+ * A line comment directly above the element, naming the rule it keeps off,
  *
- *     // @estiva-escape: <reason>
+ *     // @estiva-escape(no-raw-element): <reason>
  *
  * or, where the element is a JSX child, the JSX comment on the line above,
  *
- *     {/* @estiva-escape: <reason> *\/}
+ *     {/* @estiva-escape(no-raw-element): <reason> *\/}
  *
- * with at least ten characters of reason, spaces not counted.
+ * with at least ten characters of reason, spaces not counted. It escapes only
+ * the rules it names (Katerina's ruling B3, 25 September: one reason used to
+ * switch off every rule on the element, so a raw button that also wrote a
+ * dialog's role by hand passed under one reason). Two rules on one element are
+ * named together, `@estiva-escape(no-raw-element, no-rebuilt-behaviour)`, each
+ * on purpose. A marker that names no rule escapes nothing, and says which name
+ * to write.
  *
  * Not `eslint-disable`. A directive switches a rule off without saying it was
  * meant, and the count of escapes (`.gates-count.json`) could not see it. A
@@ -33,10 +39,21 @@ export declare const SETTINGS_KEY = "estiva";
  * reports through the rule that called it.
  */
 export declare const ESCAPE_MESSAGES: {
-    readonly escapeWithoutReason: "An escape needs its reason, at least 10 characters: `// @estiva-escape: <why this stays>`. An escape with no reason hides nothing.";
-    readonly escapeInDirective: "Write the escape as its own comment on the line above: `// @estiva-escape: <reason>`. Inside an eslint-disable comment it switches the rule off instead of recording why.";
+    readonly escapeWithoutReason: "An escape needs its reason, at least 10 characters: `// @estiva-escape({{rule}}): <why this stays>`. An escape with no reason hides nothing.";
+    readonly escapeInDirective: "Write the escape as its own comment on the line above: `// @estiva-escape({{rule}}): <reason>`. Inside an eslint-disable comment it switches the rule off instead of recording why.";
+    readonly escapeWithoutRule: "Name the rule this escape keeps off: `@estiva-escape({{rule}}): <reason>`. An escape now keeps off only the rules it names.";
     readonly escaped: "Escaped: {{reason}}";
 };
+/** A rule's name as a marker writes it: `no-raw-element` for `estiva/no-raw-element`. */
+export declare const shortRuleName: (id: string) => string;
+/**
+ * What a marker says, read from a comment's text: the rules it names (none when
+ * it names none) and its reason. Null when the comment carries no marker.
+ */
+export declare function readMarker(text: string): {
+    rules: string[];
+    reason: string;
+} | null;
 export interface EstivaSettings {
     /**
      * Report every sanctioned escape as a message with the id `escaped`, so a

package/dist/eslint/escape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"escape.d.ts","sourceRoot":"","sources":["../../src/eslint/escape.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,mBAAmB,CAAA;AAE7C,gDAAgD;AAChD,eAAO,MAAM,UAAU,KAAK,CAAA;AAE5B,2DAA2D;AAC3D,eAAO,MAAM,YAAY,WAAW,CAAA;AAEpC;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAA;AAEV,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,UAAU,OAAO;IACf,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzB;AAaD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAmC3E"}
+{"version":3,"file":"escape.d.ts","sourceRoot":"","sources":["../../src/eslint/escape.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa,mBAAmB,CAAA;AAE7C,gDAAgD;AAChD,eAAO,MAAM,UAAU,KAAK,CAAA;AAE5B,2DAA2D;AAC3D,eAAO,MAAM,YAAY,WAAW,CAAA;AAEpC;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAA;AAEV,yFAAyF;AACzF,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,WAAsC,CAAA;AAE9E;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAQnF;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,UAAU,OAAO;IACf,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzB;AAaD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAwC3E"}

package/dist/eslint/index.js

@@ -9,10 +9,21 @@ var ESCAPE_MARKER = "@estiva-escape";
 var MIN_REASON = 10;
 var SETTINGS_KEY = "estiva";
 var ESCAPE_MESSAGES = {
-  escapeWithoutReason: `An escape needs its reason, at least ${MIN_REASON} characters: \`// ${ESCAPE_MARKER}: <why this stays>\`. An escape with no reason hides nothing.`,
-  escapeInDirective: `Write the escape as its own comment on the line above: \`// ${ESCAPE_MARKER}: <reason>\`. Inside an eslint-disable comment it switches the rule off instead of recording why.`,
+  escapeWithoutReason: `An escape needs its reason, at least ${MIN_REASON} characters: \`// ${ESCAPE_MARKER}({{rule}}): <why this stays>\`. An escape with no reason hides nothing.`,
+  escapeInDirective: `Write the escape as its own comment on the line above: \`// ${ESCAPE_MARKER}({{rule}}): <reason>\`. Inside an eslint-disable comment it switches the rule off instead of recording why.`,
+  escapeWithoutRule: `Name the rule this escape keeps off: \`${ESCAPE_MARKER}({{rule}}): <reason>\`. An escape now keeps off only the rules it names.`,
   escaped: "Escaped: {{reason}}"
 };
+var shortRuleName = (id) => id.slice(id.lastIndexOf("/") + 1);
+function readMarker(text) {
+  const at = text.indexOf(ESCAPE_MARKER);
+  if (at === -1) return null;
+  const rest = text.slice(at + ESCAPE_MARKER.length);
+  const named = /^\s*\(([^)]*)\)/.exec(rest);
+  const rules2 = named ? named[1].split(/[\s,]+/).filter(Boolean).map(shortRuleName) : [];
+  const reason = (named ? rest.slice(named[0].length) : rest).replace(/^\s*:/, "").trim();
+  return { rules: rules2, reason };
+}
 var DIRECTIVE = /^\s*eslint-disable(?:-next-line|-line)?(?=\s|$)([^]*)$/;
 function directiveRules(rest) {
   const dashes = rest.search(/(?:^|\s)--(?:\s|$)/);
@@ -26,18 +37,24 @@ function isEscaped(context, node) {
   const nodeStart = node.range[0];
   const comment = sourceCode.getAllComments().find((c) => c.loc && c.range && c.loc.end.line === line - 1 && BETWEEN.test(sourceCode.text.slice(c.range[1], nodeStart)));
   if (!comment?.loc) return false;
-  const at = comment.value.indexOf(ESCAPE_MARKER);
-  if (at === -1) return false;
+  const marker = readMarker(comment.value);
+  if (!marker) return false;
+  const rule = shortRuleName(context.id);
   const directive = DIRECTIVE.exec(comment.value);
   if (directive) {
     const rules2 = directiveRules(directive[1]);
     if (rules2.length > 0 && !rules2.includes(context.id)) return false;
-    context.report({ loc: comment.loc, messageId: "escapeInDirective" });
+    context.report({ loc: comment.loc, messageId: "escapeInDirective", data: { rule } });
+    return false;
+  }
+  if (marker.rules.length > 0 && !marker.rules.includes(rule)) return false;
+  if (marker.rules.length === 0) {
+    context.report({ loc: comment.loc, messageId: "escapeWithoutRule", data: { rule } });
     return false;
   }
-  const reason = comment.value.slice(at + ESCAPE_MARKER.length).replace(/^:/, "").trim();
+  const { reason } = marker;
   if (reason.replace(/\s/g, "").length < MIN_REASON) {
-    context.report({ loc: comment.loc, messageId: "escapeWithoutReason" });
+    context.report({ loc: comment.loc, messageId: "escapeWithoutReason", data: { rule } });
     return false;
   }
   const settings = context.settings[SETTINGS_KEY];
@@ -175,6 +192,7 @@ var PLACEMENT = [
   // Draws nothing: it names the part, so what is inside can answer its hover (`group-hover:`).
   { what: "a name for hover", pattern: /^(?:group|peer)(?:\/[\w-]+)?$/ }
 ];
+var PLACEMENT_STYLE = /^(?:margin|padding|inset|scrollMargin)(?:Top|Right|Bottom|Left|Block|Inline|BlockStart|BlockEnd|InlineStart|InlineEnd)?$|^(?:width|height|minWidth|minHeight|maxWidth|maxHeight|inlineSize|blockSize|minInlineSize|minBlockSize|maxInlineSize|maxBlockSize)$|^(?:display|flex|flexGrow|flexShrink|flexBasis|order|gap|rowGap|columnGap|alignSelf|justifySelf|placeSelf|gridArea|gridColumn|gridColumnStart|gridColumnEnd|gridRow|gridRowStart|gridRowEnd)$|^(?:position|top|right|bottom|left|zIndex|transform|translate)$/;
 var REACHING_VARIANT = /^\[|^(?:before|after|placeholder|file|marker|selection|first-letter|first-line|backdrop|\*|\*\*)$/;
 function splitClass(token) {
   const variants = [];
@@ -606,6 +624,7 @@ var noRestyledPart = {
     schema: [],
     messages: {
       restyled: "{{classes}} on {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.",
+      restyledStyle: "{{keys}} in the `style` of {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled, by class or by style: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.",
       emptyStatePadding: "{{classes}} pads {{where}}. EmptyState takes no padding (Katerina, 14 September): its room comes from the box its rows live in, so put the padding on that box.",
       ...ESCAPE_MESSAGES
     }
@@ -639,6 +658,19 @@ var noRestyledPart = {
       }
       if (padding.length) context.report({ loc: at.loc, messageId: "emptyStatePadding", data: { classes: code(padding), where } });
     };
+    const checkStyle = (element, binding, value, at) => {
+      if (binding.props !== "all" || value?.type !== "JSXExpressionContainer") return;
+      let object = child(value, "expression");
+      if (object?.type === "Identifier") object = constantOf(object, scopeOf(object));
+      while (object?.type === "TSAsExpression" || object?.type === "TSSatisfiesExpression") object = child(object, "expression");
+      if (object?.type !== "ObjectExpression") return;
+      const keys = children(object, "properties").map((property) => property?.type === "Property" && !property.computed ? nameOf(child(property, "key")) : void 0).filter((key) => !!key && !key.startsWith("--") && !PLACEMENT_STYLE.test(key));
+      if (!keys.length || escaped(element)) return;
+      const props = PART_LOOK_PROPS[binding.part];
+      const use = props ? ` Use its ${or(props)}.` : ` \`${binding.part}\` has no prop for this yet: ask Katerina, and it gets made in @estiva-app/ui.`;
+      const where = binding.via && binding.via !== binding.part ? `\`${binding.via}\` (it hands its props to \`${binding.part}\`)` : `\`${binding.part}\``;
+      context.report({ loc: at.loc, messageId: "restyledStyle", data: { keys: code([...new Set(keys)]), where, use } });
+    };
     return {
       Program(program) {
         locals = moduleParts(file, program, parser, /* @__PURE__ */ new Set([file])).locals;
@@ -652,6 +684,7 @@ var noRestyledPart = {
           if (attribute3.type === "JSXAttribute") {
             const prop = nameOf(child(attribute3, "name"));
             if (prop && CLASS_PROP.test(prop)) check(element, binding, prop, child(attribute3, "value"), attribute3);
+            else if (prop === "style") checkStyle(element, binding, child(attribute3, "value"), attribute3);
             continue;
           }
           let spread = child(attribute3, "argument");
@@ -958,15 +991,28 @@ var INTERACTIVE = ["onClick", "href", "role", "onKeyDown", "onPointerDown"];
 var noHandmadeHeader = {
   meta: {
     type: "problem",
-    docs: { description: "A column's header bar drawn by hand where ContainerHeader is the part" },
+    docs: { description: "A column's header bar drawn by hand, or the package's header on its own in an app, where Panel is the part" },
     schema: [],
     messages: {
-      handmade: "A column's header bar drawn by hand. Use `ContainerHeader` from @estiva-app/ui: 48px, the title, the column's buttons at the right edge (`actions`), a hairline under it.",
+      handmade: "A column's header bar drawn by hand. Use `Panel` from @estiva-app/ui: its header (48px, the title, the column's buttons at the right edge in `actions`, a hairline under it) and a body under it that scrolls. For a list beside the page, `ListColumn`.",
+      bare: "A panel put together by hand: `ContainerHeader` over a box of your own, which cuts off whatever does not fit. Use `Panel` from @estiva-app/ui: the same header (`title`, `actions`), a body that scrolls whenever it is taller, and a `footer` that stays put. For a list beside the page, `ListColumn`.",
       ...ESCAPE_MESSAGES
     }
   },
   create(context) {
+    const bare2 = /* @__PURE__ */ new Set();
     return {
+      ImportDeclaration(node) {
+        const declaration = node;
+        if (declaration.source.value !== "@estiva-app/ui") return;
+        for (const specifier of declaration.specifiers) if (specifier.type === "ImportSpecifier" && specifier.imported?.name === "ContainerHeader") bare2.add(specifier.local.name);
+      },
+      JSXOpeningElement(node) {
+        const element = node;
+        if (element.name.type !== "JSXIdentifier" || !bare2.has(element.name.name ?? "")) return;
+        if (isEscaped(context, element)) return;
+        context.report({ loc: element.loc, messageId: "bare" });
+      },
       JSXElement(node) {
         const column = node;
         const kids = meaningful(column);
@@ -1356,7 +1402,7 @@ var noCopiedLook = {
 };
 
 // src/eslint/no-native-title.ts
-var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "SectionHeader"];
+var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "Panel", "SectionHeader"];
 var child3 = (node, key) => node[key];
 var nameOf4 = (node) => node?.type === "JSXIdentifier" || node?.type === "Identifier" ? node.name : void 0;
 var noNativeTitle = {
@@ -1452,6 +1498,28 @@ function isOn(element, name) {
   const attr = attribute2(element, name);
   return attr !== void 0 && literal(attr) !== false;
 }
+var CLICK_HANDLERS = ["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", "onDoubleClick"];
+function onlyStops(handler) {
+  if (!handler || handler.type !== "ArrowFunctionExpression" && handler.type !== "FunctionExpression") return false;
+  const body = handler.body;
+  const calls = body.type === "BlockStatement" ? body.body.map((s) => s.type === "ExpressionStatement" ? s.expression : s) : [body];
+  return calls.length > 0 && calls.every((call) => {
+    if (call.type !== "CallExpression") return false;
+    const callee = call.callee;
+    const property = callee.type === "MemberExpression" ? callee.property : void 0;
+    return property?.type === "Identifier" && (property.name === "stopPropagation" || property.name === "preventDefault");
+  });
+}
+function clickHandler(element) {
+  for (const name of CLICK_HANDLERS) {
+    const attr = attribute2(element, name);
+    if (!attr) continue;
+    const value = attr.value;
+    const handler = value?.type === "JSXExpressionContainer" ? value.expression : void 0;
+    if (!onlyStops(handler)) return name;
+  }
+  return void 0;
+}
 function classify(element) {
   if (element.name.type !== "JSXIdentifier" || !element.name.name) return null;
   const name = element.name.name;
@@ -1466,7 +1534,11 @@ function classify(element) {
     const shown = `<input type="${key}">`;
     return part2 ? { report: "raw", element: shown, part: part2 } : { report: "noPart", element: shown };
   }
-  if (!Object.hasOwn(RAW_ELEMENT_PARTS, name)) return null;
+  if (!Object.hasOwn(RAW_ELEMENT_PARTS, name)) {
+    if (!/^[a-z][a-z0-9]*$/.test(name) || name === "option" || name === "summary") return null;
+    const handler = clickHandler(element);
+    return handler ? { report: "clickable", element: `<${name} ${handler}>` } : null;
+  }
   if ((name === "audio" || name === "video") && !isOn(element, "controls")) return null;
   if (name === "img" && !attribute2(element, "usemap") && !attribute2(element, "useMap")) return null;
   const part = RAW_ELEMENT_PARTS[name];
@@ -1479,6 +1551,7 @@ var noRawElement = {
     schema: [],
     messages: {
       raw: "Use `{{use}}` from @estiva-app/ui instead of a raw {{element}}.{{more}}",
+      clickable: "A clickable {{element}} is a button made by hand: it takes no focus and answers no key. Use `Button` from @estiva-app/ui; for a whole card that opens something, `Card` with `href`. A handler that only stops the click (`e.stopPropagation()`) is fine.",
       noPart: "@estiva-app/ui has no part for a raw {{element}} yet. Do not build one here: ask Katerina, and it gets made in @estiva-app/ui.",
       ...ESCAPE_MESSAGES
     }
@@ -1491,7 +1564,8 @@ var noRawElement = {
         const found = classify(element);
         if (!found) return;
         if (isEscaped(context, element)) return;
-        if (found.report === "noPart") context.report({ loc: element.loc, messageId: "noPart", data: { element: found.element } });
+        if (found.report === "clickable") context.report({ loc: element.loc, messageId: "clickable", data: { element: found.element } });
+        else if (found.report === "noPart") context.report({ loc: element.loc, messageId: "noPart", data: { element: found.element } });
         else context.report({ loc: element.loc, messageId: "raw", data: { element: found.element, use: found.part.use, more: found.part.more ?? "" } });
       }
     };