npm - @agent-native/core - Versions diffs - 0.83.0 → 0.84.0 - Mend

@agent-native/core 0.83.0 → 0.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (424) hide show

package/corpus/templates/design/app/pages/DesignSystemSetup.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import {
-  sendToAgentChat,
   openAgentSidebar,
   useActionQuery,
   appApiPath,
@@ -31,6 +30,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
 interface GitHubLink {
   id: string;
@@ -448,7 +448,11 @@ export default function DesignSystemSetup() {
     );
     openAgentSidebar();
-    sendToAgentChat({ message: parts.join("\n"), submit: true, newTab: true });
+    sendToDesignAgentChat({
+      message: parts.join("\n"),
+      submit: true,
+      newTab: true,
+    });
     navigate("/design-systems");
   }, [
     hasAnySources,
@@ -1079,19 +1083,19 @@ function BuilderIndexPreview({
         <dt className="text-muted-foreground">
           {"Project" /* i18n-ignore Builder indexing field */}
         </dt>
-        <dd className="truncate font-mono text-[11px] text-foreground/80">
+        <dd className="truncate font-mono !text-[11px] text-foreground/80">
           {result.projectId}
         </dd>
         <dt className="text-muted-foreground">
           {"Job" /* i18n-ignore Builder indexing field */}
         </dt>
-        <dd className="truncate font-mono text-[11px] text-foreground/80">
+        <dd className="truncate font-mono !text-[11px] text-foreground/80">
           {result.jobId}
         </dd>
         <dt className="text-muted-foreground">
           {"Design system" /* i18n-ignore Builder indexing field */}
         </dt>
-        <dd className="truncate font-mono text-[11px] text-foreground/80">
+        <dd className="truncate font-mono !text-[11px] text-foreground/80">
           {result.designSystemId}
         </dd>
       </dl>

package/corpus/templates/design/app/pages/DesignSystems.tsx CHANGED Viewed

@@ -543,7 +543,7 @@ export default function DesignSystems() {
                       <div className="flex flex-wrap items-center justify-between gap-2 px-4 pb-4">
                         <VisibilityBadge
                           visibility={ds.visibility}
-                          className="text-[11px]"
+                          className="!text-[11px]"
                         />
                         <ShareButton
                           resourceType="design-system"
@@ -893,7 +893,7 @@ function TokenPreview({
                   <div className="text-xs font-medium text-foreground">
                     {color.label}
                   </div>
-                  <div className="truncate font-mono text-[11px] text-muted-foreground">
+                  <div className="truncate font-mono !text-[11px] text-muted-foreground">
                     {color.value}
                   </div>
                 </div>

package/corpus/templates/design/app/pages/Index.tsx CHANGED Viewed

@@ -37,7 +37,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -47,6 +46,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
 import {
   Tooltip,
   TooltipContent,
@@ -83,6 +83,7 @@ export default function Index() {
     () => new Set(),
   );
   const [showNewPrompt, setShowNewPrompt] = useState(false);
+  const [newDesignHandoffPending, setNewDesignHandoffPending] = useState(false);
   const [newDesignSystemId, setNewDesignSystemId] = useState<
     string | null | undefined
   >(undefined);
@@ -112,10 +113,8 @@ export default function Index() {
   const designs = designsData?.designs ?? [];
   const filtered = search
-    ? designs.filter(
-        (d) =>
-          d.title.toLowerCase().includes(search.toLowerCase()) ||
-          d.projectType.toLowerCase().includes(search.toLowerCase()),
+    ? designs.filter((d) =>
+        d.title.toLowerCase().includes(search.toLowerCase()),
       )
     : designs;
   const selectedDesignCount = selectedDesignIds.size;
@@ -271,7 +270,7 @@ export default function Index() {
         ...options,
       });
-      setShowNewPrompt(false);
+      setNewDesignHandoffPending(true);
       navigate(`/design/${id}`);
     },
     [createDesign, navigate, newDesignSystemId, resolveDefaultDesignSystemId],
@@ -379,14 +378,6 @@ export default function Index() {
     });
   }, [renameId, renameDraft, queryClient, updateMutation]);
-  const projectTypeBadge = (type: ProjectType) => {
-    return (
-      <Badge variant="secondary" className="text-[10px] font-medium">
-        {type === "prototype" ? t("home.prototype") : t("home.other")}
-      </Badge>
-    );
-  };
   const formatDate = (dateStr?: string) => {
     if (!dateStr) return "";
     const d = new Date(dateStr);
@@ -400,8 +391,8 @@ export default function Index() {
   useSetPageTitle(t("home.pageTitle"));
   useSetHeaderActions(
-    <div className="flex items-center gap-3">
-      {designs.length > 0 ? (
+    designs.length > 0 ? (
+      <div className="flex items-center gap-3">
         <div className="relative">
           <IconSearch className="absolute start-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/70" />
           <Input
@@ -411,16 +402,28 @@ export default function Index() {
             className="ps-8 h-8 w-48 bg-accent/50 border-border text-sm text-foreground/90 placeholder:text-muted-foreground/70"
           />
         </div>
-      ) : null}
-      <Button size="sm" onClick={openNewDesign} className="cursor-pointer">
-        <IconPlus className="w-3.5 h-3.5" />
-        {t("home.newDesign")}
-      </Button>
-    </div>,
+        <Button
+          size="sm"
+          onClick={openNewDesign}
+          disabled={newDesignHandoffPending}
+          className="cursor-pointer"
+        >
+          {newDesignHandoffPending ? (
+            <Spinner className="w-3.5 h-3.5" />
+          ) : (
+            <IconPlus className="w-3.5 h-3.5" />
+          )}
+          {newDesignHandoffPending
+            ? t("home.openingDesign")
+            : t("home.newDesign")}
+        </Button>
+      </div>
+    ) : null,
   );
   return (
     <>
+      {newDesignHandoffPending ? <NewDesignHandoffOverlay /> : null}
       <main className="px-4 sm:px-6 py-6 sm:py-10">
         {isLoading ? (
           <LoadingSkeleton />
@@ -494,11 +497,16 @@ export default function Index() {
               {/* New design card */}
               <button
                 onClick={openNewDesign}
+                disabled={newDesignHandoffPending}
                 className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-start cursor-pointer"
               >
                 <div className="aspect-video flex items-center justify-center bg-muted/30">
                   <div className="w-12 h-12 rounded-xl bg-accent/50 flex items-center justify-center group-hover:bg-accent">
-                    <IconPlus className="w-6 h-6 text-muted-foreground/70 group-hover:text-muted-foreground" />
+                    {newDesignHandoffPending ? (
+                      <Spinner className="w-6 h-6 text-muted-foreground/70" />
+                    ) : (
+                      <IconPlus className="w-6 h-6 text-muted-foreground/70 group-hover:text-muted-foreground" />
+                    )}
                   </div>
                 </div>
                 <div className="p-4">
@@ -522,7 +530,6 @@ export default function Index() {
                         <h3 className="font-medium text-sm text-foreground/90 truncate flex-1">
                           {design.title}
                         </h3>
-                        {projectTypeBadge(design.projectType)}
                       </div>
                       <div className="text-xs text-muted-foreground/70">
                         {formatDate(design.updatedAt || design.createdAt)}
@@ -629,6 +636,7 @@ export default function Index() {
         designSystemsLoading={designSystemsLoading}
         selectedDesignSystemId={newDesignSystemId ?? null}
         onDesignSystemChange={setNewDesignSystemId}
+        loading={newDesignHandoffPending}
         onCreateDesignSystem={() => {
           handleNewPromptOpenChange(false);
           navigate("/design-systems/setup");
@@ -813,6 +821,22 @@ function DesignThumbnail({ html }: { html: string | null }) {
   );
 }
+function NewDesignHandoffOverlay() {
+  const t = useT();
+  return (
+    <div
+      className="fixed inset-0 z-[180] flex items-center justify-center bg-background/70 backdrop-blur-sm"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-popover px-3 py-2 text-sm font-medium text-foreground shadow-lg">
+        <Spinner className="size-4 text-muted-foreground" />
+        {t("home.openingDesign")}
+      </div>
+    </div>
+  );
+}
 function LoadingSkeleton() {
   return (
     <>
@@ -894,11 +918,10 @@ function EmptyState({
         ))}
       </div>
       <Button
-        variant="outline"
         onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
           onCreateDesign(e as React.MouseEvent<HTMLElement>)
         }
-        className="cursor-pointer"
+        className="cursor-pointer dark:bg-white dark:text-black dark:hover:bg-white/90"
       >
         <IconPlus className="w-4 h-4" />
         {t("home.newDesign")}

package/corpus/templates/design/app/pages/NotFound.tsx CHANGED Viewed

@@ -1,23 +1,40 @@
-import { useT } from "@agent-native/core/client";
-import { IconArrowLeft } from "@tabler/icons-react";
+import {
+  buildSignInReturnHref,
+  useSession,
+  useT,
+} from "@agent-native/core/client";
+import { IconArrowLeft, IconLogin2 } from "@tabler/icons-react";
 import { Link } from "react-router";
 import { Button } from "@/components/ui/button";
 export default function NotFound() {
   const t = useT();
+  const { session, isLoading } = useSession();
+  const showSignIn = !isLoading && !session?.email;
   return (
     <div className="flex min-h-full w-full flex-col items-center justify-center bg-background px-4 py-12">
       <h1 className="text-6xl font-bold text-muted-foreground/60 mb-4">404</h1>
       <p className="text-sm text-muted-foreground mb-6">
         {t("pages.notFoundDescription")}
       </p>
-      <Button asChild variant="outline" className="cursor-pointer">
-        <Link to="/">
-          <IconArrowLeft className="w-4 h-4 rtl:-scale-x-100" />
-          {t("pages.notFoundBackToDesigns")}
-        </Link>
-      </Button>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        {showSignIn && (
+          <Button asChild className="cursor-pointer">
+            <a href={buildSignInReturnHref()}>
+              <IconLogin2 className="size-4" />
+              {t("pages.notFoundSignIn")}
+            </a>
+          </Button>
+        )}
+        <Button asChild variant="outline" className="cursor-pointer">
+          <Link to="/">
+            <IconArrowLeft className="size-4 rtl:-scale-x-100" />
+            {t("pages.notFoundBackToDesigns")}
+          </Link>
+        </Button>
+      </div>
     </div>
   );
 }

package/corpus/templates/design/app/pages/VisualEdit.tsx CHANGED Viewed

@@ -20,6 +20,11 @@ export default function VisualEditPage() {
   const { session } = useSession();
   const hasSession = Boolean(session?.email);
   const primaryHref = hasSession ? "/" : buildSignInHref();
+  const primaryTarget = hasSession ? undefined : "_blank";
+  const primaryRel = hasSession ? undefined : "noopener noreferrer";
+  const primaryAriaLabel = hasSession
+    ? t("visualEdit.openDesign")
+    : t("designEditor.signUpToSave");
   return (
     <main className="min-h-[100dvh] bg-background text-foreground">
@@ -32,7 +37,12 @@ export default function VisualEditPage() {
             {t("navigation.brand")}
           </Link>
           <Button asChild variant="outline" size="sm">
-            <a href={primaryHref}>
+            <a
+              href={primaryHref}
+              target={primaryTarget}
+              rel={primaryRel}
+              aria-label={primaryAriaLabel}
+            >
               {hasSession
                 ? t("visualEdit.openDesign")
                 : t("visualEdit.saveCta")}
@@ -55,16 +65,18 @@ export default function VisualEditPage() {
             </p>
             <div className="mt-7 flex flex-wrap items-center gap-3">
               <Button asChild size="lg" className="gap-2">
-                <a href={primaryHref}>
+                <a
+                  href={primaryHref}
+                  target={primaryTarget}
+                  rel={primaryRel}
+                  aria-label={primaryAriaLabel}
+                >
                   <IconDeviceFloppy className="size-4" />
                   {hasSession
                     ? t("visualEdit.openDesign")
                     : t("visualEdit.saveCta")}
                 </a>
               </Button>
-              <Button asChild variant="ghost" size="lg">
-                <Link to="/templates">{t("visualEdit.templatesCta")}</Link>
-              </Button>
             </div>
           </div>

package/corpus/templates/design/app/routes/examples.tsx CHANGED Viewed

@@ -1,13 +1,7 @@
 import { redirect } from "react-router";
-import { messagesByLocale } from "@/i18n-data";
 export function loader() {
-  return redirect("/templates", 301);
-}
-export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designTemplates }];
+  return redirect("/", 302);
 }
 export default function ExamplesRedirect() {

package/corpus/templates/design/app/routes/templates.tsx CHANGED Viewed

@@ -1,6 +1,9 @@
-export { default } from "../pages/Templates";
-import { messagesByLocale } from "@/i18n-data";
+import { redirect } from "react-router";
-export function meta() {
-  return [{ title: messagesByLocale["en-US"].routeTitles.designTemplates }];
+export function loader() {
+  return redirect("/", 302);
+}
+export default function TemplatesRedirect() {
+  return null;
 }

package/corpus/templates/design/changelog/2026-06-30-board-shapes-and-auto-layout-controls-are-clearer.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Board shapes stay visible in the overview.

package/corpus/templates/design/changelog/2026-06-30-component-selections-now-use-purple-component-chrome-and-sho.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Component selections now use purple component chrome and show auto-layout parent outlines.

package/corpus/templates/design/changelog/2026-06-30-constraints-now-stay-tucked-into-a-compact-inspector-preview.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Constraints now expand inline from a compact inspector preview toggle.

package/corpus/templates/design/changelog/2026-06-30-creating-a-component-now-opens-in-a-compact-inspector-popove.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Creating a component now opens in a compact inspector popover.

package/corpus/templates/design/changelog/2026-06-30-design-cards-no-longer-show-legacy-project-type-badges.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Design cards no longer show legacy project-type badges.

package/corpus/templates/design/changelog/2026-06-30-design-chat-now-keeps-new-turns-in-the-visible-design-agent-.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Design chat now keeps new turns in the visible Design agent panel so thinking, tabs, streaming replies, and tool calls update live.

package/corpus/templates/design/changelog/2026-06-30-design-editor-panels-now-keep-their-compact-text-sizing-cons.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Design editor panels now keep their compact text sizing consistently across controls.

package/corpus/templates/design/changelog/2026-06-30-design-no-longer-shows-the-connected-local-code-warning-bann.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Design no longer shows the connected local code warning banner.

package/corpus/templates/design/changelog/2026-06-30-design-now-opens-to-the-files-panel-unless-a-generation-is-a.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Design now opens to the Files panel unless a generation is actively running.

package/corpus/templates/design/changelog/2026-06-30-design-opens-with-a-cleaner-empty-canvas-and-loading-preview.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Design opens with a cleaner empty canvas and loading preview.

package/corpus/templates/design/changelog/2026-06-30-design-tools-use-simpler-less-decorative-icons.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Design tools use simpler, less decorative icons.

package/corpus/templates/design/changelog/2026-06-30-dragging-absolute-elements-no-longer-shows-coordinate-labels.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Dragging absolute elements no longer shows coordinate labels next to the cursor.

package/corpus/templates/design/changelog/2026-06-30-fixed-all-screens-opening-too-zoomed-in-by-default.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Fixed All screens opening too zoomed in by default.

package/corpus/templates/design/changelog/2026-06-30-fixed-the-public-design-assets-sidebar-so-native-components-.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Fixed the public Design Assets sidebar so native components load for signed-out viewers.

package/corpus/templates/design/changelog/2026-06-30-fixed-the-screen-overview-board-so-empty-board-space-no-long.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Fixed the screen overview board so empty board space no longer blocks pan, zoom, or layer selection.

package/corpus/templates/design/changelog/2026-06-30-full-view-screens-can-now-scroll-while-remaining-editable.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Full-view screens can now scroll while remaining editable.

package/corpus/templates/design/changelog/2026-06-30-inspector-element-headers-show-the-selected-html-tag-and-the.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Inspector element headers show the selected HTML tag and the code action previews highlighted HTML.

package/corpus/templates/design/changelog/2026-06-30-inspector-inputs-stay-compact-across-desktop-breakpoints.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Inspector inputs stay compact across desktop breakpoints.

package/corpus/templates/design/changelog/2026-06-30-layers-can-be-multi-selected-from-the-canvas-and-edited-toge.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Layers can be multi-selected from the canvas and edited together with mixed values shown in the inspector.

package/corpus/templates/design/changelog/2026-06-30-local-visual-edit-links-can-edit-localhost-frames-without-si.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Local visual-edit links can edit localhost frames without signing in.

package/corpus/templates/design/changelog/2026-06-30-localhost-visual-edit-frames-can-now-be-selected-and-edited.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Local visual-edit frames can now be panned, selected, and edited from the Design canvas.

package/corpus/templates/design/changelog/2026-06-30-marquee-selection-now-works-inside-screens-multi-selected-la.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Marquee selection now works inside screens, multi-selected layers show resize handles, and mixed dimensions display clearly.

package/corpus/templates/design/changelog/2026-06-30-motion-is-now-available-from-the-persistent-left-rail-and-th.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Motion is now available from the persistent left rail and the timeline opens and closes smoothly.

package/corpus/templates/design/changelog/2026-06-30-motion-timeline-collapse-and-reopen-animations-feel-smoother.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Motion timeline collapse and reopen animations feel smoother.

package/corpus/templates/design/changelog/2026-06-30-multi-select-outlines-now-stay-consistent-across-all-screens.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Multi-select outlines now stay consistent across All screens and root canvas marquee selection works more like Figma.

package/corpus/templates/design/changelog/2026-06-30-new-board-shapes-now-start-with-neutral-gray-styling.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+New board shapes now start with neutral gray styling while preserving explicit fill and stroke choices.

package/corpus/templates/design/changelog/2026-06-30-new-designs-open-into-a-steadier-loading-state-before-the-ed.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+New designs open into a steadier loading state before the editor appears.

package/corpus/templates/design/changelog/2026-06-30-new-designs-show-a-loading-state-during-handoff-and-keep-edi.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+New designs show a loading state during handoff and keep editing chrome hidden until the first screen appears.

package/corpus/templates/design/changelog/2026-06-30-public-visual-edit-design-links-now-open-directly-instead-of.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Public visual-edit Design links now open directly instead of showing the sign-in screen.

package/corpus/templates/design/changelog/2026-06-30-removed-the-confusing-states-section-from-the-design-editor-.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: removed
+date: 2026-06-30
+---
+Removed the confusing States section from the design editor inspector.

package/corpus/templates/design/changelog/2026-06-30-removed-the-templates-gallery-from-design-navigation.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: removed
+date: 2026-06-30
+---
+Removed the Templates gallery from Design navigation.

package/corpus/templates/design/changelog/2026-06-30-share-stays-visible-as-soon-as-editable-designs-load.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Share stays visible as soon as editable designs load.

package/corpus/templates/design/changelog/2026-06-30-signed-out-save-and-share-controls-use-simpler-labels-and-op.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+Signed-out save and share controls use simpler labels and open sign-up in a new tab.

package/corpus/templates/design/changelog/2026-06-30-text-added-on-the-canvas-now-focuses-cleanly-with-the-right-.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+Text added on the canvas now focuses cleanly with the right editing outline.

package/corpus/templates/design/changelog/2026-06-30-the-design-editor-loading-skeleton-is-simpler-and-its-bottom.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+The Design editor loading skeleton is simpler and its bottom toolbar uses one consistent surface.