@@ -0,0 +1,12 @@
+---
+'@object-ui/app-shell': patch
+---
+
+fix(app-shell): Studio's disabled Publish says why there is nothing to publish, on hover and on keyboard focus, the way it already does on a read-only package
+
+Clause-②: no
+Metadata-protocol: none
+
+With no drafts pending, the Studio header's Publish button was natively disabled and carried its reason ("No drafts pending publish") only as a `title` on the button itself. A disabled button fires no hover or focus events, so no tooltip opened and Tab skipped Publish entirely. It now takes the read-only state's treatment: a focusable wrapper that is the tooltip trigger and a tab stop, with the wrapper and the button both described by the existing `sr-only` reason. The text is the existing `engine.studio.publishNoneTitle` sentence; no locale key is added.
+
+The read-only state is unchanged, a pending draft still shows the plain enabled Publish button, and a publish in flight keeps its spinner without a wrapper.
@@ -16,6 +16,13 @@
  * other half of the row, is pinned in
  * `StudioDesignSurface.automationsReadOnly-11124.test.tsx`.
  *
+ * objectstack#31495 — the other disabled state, a writable package with
+ * nothing pending ("No drafts pending publish"), kept the `title` on the
+ * disabled button: no wrapper, no tooltip on hover, and Tab skipped Publish.
+ * It now takes the same wrapper, described by the same `sr-only` reason
+ * (`publish-none-reason`); with a draft pending Publish is a plain enabled
+ * button again. Pinned in the last block below.
+ *
  * The REAL `StudioDesignSurface` over a fetch stub (the harness of
  * `StudioDesignSurface.interfacePolish.test.tsx`); only the package list's
  * `writable` differs between the case and its control.
@@ -28,10 +35,15 @@ import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { I18nProvider } from '@object-ui/i18n';
+// The surface loads the linter lazily; pay that load at collection, not inside
+// a case's clocked window.
+import '@objectstack/lint';
 
 const PACKAGE_ID = 'com.acme.app';
 
 const pkg = vi.hoisted(() => ({ writable: false }));
+/** The draft ledger `/meta/_drafts` answers. */
+let drafts: Array<{ type: string; name: string; packageId: string }> = [];
 
 vi.mock('./packages-io', async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -73,18 +85,20 @@ window.matchMedia = ((query: string) => ({
   };
 
 const REASON = t('engine.studio.pkg.readonlyHint', 'en-US');
+const NONE_PENDING = t('engine.studio.publishNoneTitle', 'en-US');
 
 function json(body: unknown, status = 200) {
   return new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } });
 }
 
 beforeEach(() => {
   pkg.writable = false;
+  drafts = [];
   vi.stubGlobal(
     'fetch',
     vi.fn(async (input: unknown) => {
       const path = new URL(String(input), 'http://localhost').pathname;
-      if (path === '/api/v1/meta/_drafts') return json([]);
+      if (path === '/api/v1/meta/_drafts') return json(drafts);
       if (path === '/api/v1/meta/app') return json([{ name: 'acme_app', label: 'Acme' }]);
       if (path === '/api/v1/meta/app/acme_app/layers') {
         return json({ code: null, overlay: null, overlayScope: null, effective: { name: 'acme_app', label: 'Acme', navigation: [] } });
@@ -120,19 +134,27 @@ const describedBy = (el: HTMLElement) => {
   return id ? document.getElementById(id) : null;
 };
 
-/** Publish once the package list has said the package is read-only. */
-async function readOnlyPublish(): Promise<HTMLElement> {
+/**
+ * Publish once its wrapper gives `reason`. The wrapper alone is not enough to
+ * wait on: before the package list answers, an empty ledger already wraps
+ * Publish in the "nothing pending" reason (objectstack#31495).
+ */
+async function wrappedPublish(reason: string): Promise<HTMLElement> {
   renderWorkbench();
   return waitFor(
     () => {
       const btn = publish();
       expect(btn.parentElement).toHaveAttribute('data-disabled-reason');
+      expect(describedBy(btn.parentElement as HTMLElement)).toHaveTextContent(reason);
       return btn;
     },
     { timeout: 8000 },
   );
 }
 
+/** Publish once the package list has said the package is read-only. */
+const readOnlyPublish = () => wrappedPublish(REASON);
+
 describe('Studio header Publish on a read-only package — the reason reaches the author (objectui#12303)', () => {
   it('Publish is described by the reason, carries no `title`, and its wrapper is described by it too', async () => {
     const btn = await readOnlyPublish();
@@ -160,7 +182,7 @@ describe('Studio header Publish on a read-only package — the reason reaches th
     expect(await screen.findByRole('tooltip')).toHaveTextContent(REASON);
   });
 
-  it('CONTROL — a writable package: Publish has no read-only reason and no wrapper', async () => {
+  it('CONTROL — a writable package: Publish gives no read-only reason', async () => {
     pkg.writable = true;
     renderWorkbench();
     // Read after the package list has answered `writable: true`.
@@ -170,8 +192,68 @@ describe('Studio header Publish on a read-only package — the reason reaches th
     });
     const btn = publish();
     expect(btn).not.toHaveAttribute('title', REASON);
-    expect(btn.parentElement).not.toHaveAttribute('data-disabled-reason');
+    // An empty ledger still wraps it, in its own reason (objectstack#31495).
+    expect(describedBy(btn.parentElement as HTMLElement)).toHaveTextContent(NONE_PENDING);
     expect(describedBy(btn)).not.toHaveTextContent(REASON);
     expect(screen.queryByText(REASON)).toBeNull();
   });
 });
+
+describe('Studio header Publish with nothing pending — the reason reaches the author (objectstack#31495)', () => {
+  beforeEach(() => {
+    pkg.writable = true;
+  });
+
+  /** Publish on a writable package once the empty ledger has wrapped it. */
+  const nonePendingPublish = () => wrappedPublish(NONE_PENDING);
+
+  it('the wrapper is a tab stop, and it and the button are described by "No drafts pending publish"', async () => {
+    const btn = await nonePendingPublish();
+    expect(btn).toBeDisabled();
+    // The disabled button cannot show a `title`; the reason is the wrapper's.
+    expect(btn).not.toHaveAttribute('title');
+    expect(btn).toHaveAccessibleDescription(NONE_PENDING);
+    const wrapper = btn.parentElement as HTMLElement;
+    expect(wrapper).toHaveAttribute('tabindex', '0');
+    expect(wrapper).toHaveAccessibleDescription(NONE_PENDING);
+    // One reason element, the `sr-only` one both point at.
+    expect(describedBy(wrapper)).toBe(screen.getByTestId('publish-none-reason'));
+    expect(describedBy(btn)).toBe(describedBy(wrapper));
+    // The wrapper takes the hover: the disabled button lets it through.
+    expect(btn.className).toMatch(/(^|\s)disabled:pointer-events-none(\s|$)/);
+  });
+
+  it('hovering Publish opens a tooltip with the reason', async () => {
+    const user = userEvent.setup();
+    const btn = await nonePendingPublish();
+    await user.hover(btn.parentElement as HTMLElement);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(NONE_PENDING);
+  });
+
+  it('a keyboard user reaches the reason: Tab from "Changes" lands on Publish’s wrapper, which opens the tooltip', async () => {
+    const user = userEvent.setup();
+    const btn = await nonePendingPublish();
+    screen.getByRole('button', { name: /^Changes/ }).focus();
+    await user.tab();
+    expect(btn.parentElement).toHaveFocus();
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(NONE_PENDING);
+  });
+
+  it('CONTROL — a draft pending: a plain enabled Publish, no wrapper and no reason', async () => {
+    drafts = [{ type: 'dashboard', name: 'acme_dashboard', packageId: PACKAGE_ID }];
+    renderWorkbench();
+    const btn = await waitFor(
+      () => {
+        const b = publish();
+        expect(b).toBeEnabled();
+        return b;
+      },
+      { timeout: 8000 },
+    );
+    expect(btn.parentElement).not.toHaveAttribute('data-disabled-reason');
+    expect(btn).not.toHaveAttribute('aria-describedby');
+    expect(btn.className).not.toMatch(/(^|\s)disabled:pointer-events-none(\s|$)/);
+    expect(screen.queryByTestId('publish-none-reason')).toBeNull();
+    expect(screen.queryByText(NONE_PENDING)).toBeNull();
+  });
+});
@@ -1214,6 +1214,15 @@ function StudioDesignSurfaceBody({ aiSlot, area }: StudioDesignSurfaceProps): Re
   );
   const publishNoneReasonId = React.useId();
   const publishReadOnlyReasonId = React.useId();
+  // The reason a disabled Publish gives, or `null` when it gives none: the
+  // button is enabled, or a publish is in flight (a spinner, for a moment, not
+  // a state the author has to get out of). A read-only package outranks an
+  // empty ledger; with neither, the button is the primary action.
+  const publishDisabledReason: { id: string; text: string; testId?: string } | null = publishReadOnly
+    ? { id: publishReadOnlyReasonId, text: t('engine.studio.pkg.readonlyHint', locale) }
+    : !hasPending && !publishing
+      ? { id: publishNoneReasonId, text: t('engine.studio.publishNoneTitle', locale), testId: 'publish-none-reason' }
+      : null;
 
   // Builder → running-app bridge (Airtable's Launch): the builder edits the
   // package (the design surface), the app is its published front-end. If this
@@ -1512,22 +1521,10 @@ function StudioDesignSurfaceBody({ aiSlot, area }: StudioDesignSurfaceProps): Re
         setChangesOpen(true);
       }}
       disabled={publishing || !hasPending || publishReadOnly}
-      aria-describedby={
-        publishReadOnly
-          ? publishReadOnlyReasonId
-          : !hasPending && !publishing
-            ? publishNoneReasonId
-            : undefined
-      }
-      // A read-only package's reason is the wrapper's (objectui#12303), not a
-      // `title` the disabled button can never show.
-      title={
-        publishReadOnly
-          ? undefined
-          : hasPending
-            ? t('engine.studio.publishTitle', locale)
-            : t('engine.studio.publishNoneTitle', locale)
-      }
+      aria-describedby={publishDisabledReason?.id}
+      // A disabled Publish's reason is its wrapper's (objectui#12303,
+      // objectstack#31495), never a `title` the disabled button cannot show.
+      title={hasPending && !publishReadOnly ? t('engine.studio.publishTitle', locale) : undefined}
       // objectui#8219 — the primary style is for a publish the author
       // CAN do. A disabled one (no draft, or a read-only package)
       // drops to an outline, instead of staying the loudest element
@@ -1539,7 +1536,7 @@ function StudioDesignSurfaceBody({ aiSlot, area }: StudioDesignSurfaceProps): Re
           ? 'border-transparent bg-primary text-primary-foreground disabled:opacity-50'
           : 'text-muted-foreground',
         // The wrapper takes the hover: the disabled button lets it through.
-        publishReadOnly && 'disabled:pointer-events-none',
+        publishDisabledReason && 'disabled:pointer-events-none',
       )}
     >
       {publishing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Rocket className="h-3.5 w-3.5" />}
@@ -1677,46 +1674,38 @@ function StudioDesignSurfaceBody({ aiSlot, area }: StudioDesignSurfaceProps): Re
                   </span>
                 )}
               </button>
-              {/* objectui#8219 — with nothing to publish, say so on the page;
-                  objectui#12459 moves the sentence off the strip into the
-                  Publish button's description, where readers and the tooltip
-                  still find it. */}
-              {!hasPending && !publishReadOnly && !publishing && (
-                <span
-                  id={publishNoneReasonId}
-                  className="sr-only"
-                  data-testid="publish-none-reason"
-                >
-                  {t('engine.studio.publishNoneTitle', locale)}
-                </span>
-              )}
-              {/* objectui#12303 — on a read-only package the reason rides the
-                  record page's Archive pattern (`DeclaredActionsBar`,
-                  objectui#11811) instead of a `title` on the disabled button:
-                  a natively disabled button fires no hover or focus, so the
-                  `title` reached no keyboard or assistive-tech user and Tab
-                  skipped Publish entirely. The wrapping span is the tooltip
-                  trigger and a tab stop, and the button and the span both
-                  point `aria-describedby` at an `sr-only` copy of the reason.
-                  objectstack#28562 — a read-only base with a customization
-                  package publishes that package's drafts, so it is not this. */}
-              {publishReadOnly ? (
+              {/* A disabled Publish says why, to the mouse, the keyboard and
+                  assistive tech alike — the record page's Archive pattern
+                  (`DeclaredActionsBar`, objectui#11811), for both reasons it
+                  can be off: a read-only package (objectui#12303) and nothing
+                  pending (objectui#8219, objectstack#31495). A natively
+                  disabled button fires no hover or focus, so the wrapping span
+                  is the tooltip trigger and a tab stop, and the button and the
+                  span both point `aria-describedby` at an `sr-only` copy of
+                  the reason. objectstack#28562 — a read-only base with a
+                  customization package publishes that package's drafts, so it
+                  is not read-only here. */}
+              {publishDisabledReason ? (
                 <TooltipProvider delayDuration={200}>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <span
                         tabIndex={0}
-                        aria-describedby={publishReadOnlyReasonId}
+                        aria-describedby={publishDisabledReason.id}
                         data-disabled-reason=""
                         className="inline-flex rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                       >
                         {publishButton}
-                        <span id={publishReadOnlyReasonId} className="sr-only">
-                          {t('engine.studio.pkg.readonlyHint', locale)}
+                        <span
+                          id={publishDisabledReason.id}
+                          className="sr-only"
+                          data-testid={publishDisabledReason.testId}
+                        >
+                          {publishDisabledReason.text}
                         </span>
                       </span>
                     </TooltipTrigger>
-                    <TooltipContent>{t('engine.studio.pkg.readonlyHint', locale)}</TooltipContent>
+                    <TooltipContent>{publishDisabledReason.text}</TooltipContent>
                   </Tooltip>
                 </TooltipProvider>
               ) : (