feat: refine widget interactions

apps/docs/docs/widgets/notebook/index.mdx

@@ -38,7 +38,7 @@ import editOn from "./img/edit.png";
 
 ### Editing
 
-When the permissions of the user allows it, you can enter the editing of the text by clicking the following button in the top right.
+When your permissions allow it, hover the widget, focus within it, or use a touch device to reveal the edit button in the top right. You can also double-click the document to edit it directly.
 
 ![](./img/notebook-enter-editing.webp)
 

apps/docs/src/components/widgets/interactions.tsx

@@ -1,11 +1,11 @@
-import { IconArrowsMaximize, IconMouse2, IconPlus } from "@tabler/icons-react";
+import { IconArrowsMaximize, IconLayoutGrid, IconMouse2, IconPlus } from "@tabler/icons-react";
 
 const interactions = [
   {
     icon: IconArrowsMaximize,
     title: "Advanced view",
     description:
-      "Hold Shift while hovering (then pin it), press Shift + Enter, or choose Open advanced view from the widget menu.",
+      "Hold Shift while hovering for an in-place preview, press Shift + Enter, or choose Open advanced view from the widget menu.",
   },
   {
     icon: IconMouse2,
@@ -19,6 +19,12 @@ const interactions = [
     description:
       "With board changes allowed, right-click or touch and hold empty grid space to add there. Keyboard users can press Shift + F10.",
   },
+  {
+    icon: IconLayoutGrid,
+    title: "Adaptive detail",
+    description:
+      "Resize a widget to tune its density. Compact views keep primary status visible, then reveal details and controls as space or intent allows.",
+  },
 ] as const;
 
 export const WidgetInteractionGuide = () => (
@@ -30,7 +36,7 @@ export const WidgetInteractionGuide = () => (
         Hide shortcuts
       </span>
     </summary>
-    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-3 dark:border-[#333]">
+    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-2 xl:grid-cols-4 dark:border-[#333]">
       {interactions.map(({ icon: Icon, title, description }) => (
         <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
           <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
@@ -40,8 +46,8 @@ export const WidgetInteractionGuide = () => (
       ))}
     </div>
     <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
-      Advanced view reuses the widget&apos;s live data and cache. Touch devices expose a maximize control; board actions
-      respect your permissions and right-click preference.
+      Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed. Touch
+      devices expose a maximize control; app tiles stay compact.
     </p>
   </details>
 );