Smooth Share Button

[{"id":"0c1247a4-c2ff-4581-a19c-568746f4e45c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"bb859704-c490-486d-8b4a-997ff9748016","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.share-dock-shell {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.share-dock-button {\\n position: relative;\\n width: 120px;\\n height: 48px;\\n\\n overflow: hidden;\\n border: 1px solid #e4e4e7;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\\n\\n transition:\\n width 520ms cubic-bezier(0.16, 1, 0.3, 1),\\n box-shadow 280ms ease,\\n border-color 280ms ease;\\n\\n will-change: width;\\n}\\n\\n.share-dock-button:hover,\\n.share-dock-button.is-open {\\n border-color: #d4d4d8;\\n box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);\\n}\\n\\n.share-dock-button.is-open {\\n width: 204px;\\n}\\n\\n.share-dock-trigger {\\n position: absolute;\\n inset: 0;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 8px;\\n\\n border: 0;\\n background: transparent;\\n color: #18181b;\\n\\n font-size: 14px;\\n font-weight: 500;\\n\\n cursor: pointer;\\n\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n filter: blur(0);\\n\\n transition:\\n opacity 220ms ease,\\n transform 320ms cubic-bezier(0.16, 1, 0.3, 1),\\n filter 220ms ease;\\n\\n will-change: opacity, transform;\\n}\\n\\n.share-dock-button.is-open .share-dock-trigger {\\n opacity: 0;\\n transform: translateY(-10px) scale(0.96);\\n filter: blur(2px);\\n pointer-events: none;\\n}\\n\\n.share-dock-icon {\\n width: 18px;\\n height: 18px;\\n fill: none;\\n stroke: currentColor;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\\n\\n.share-dock-actions {\\n position: absolute;\\n inset: 0;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 6px;\\n\\n padding: 0 8px;\\n\\n opacity: 0;\\n transform: translateY(10px) scale(0.96);\\n filter: blur(2px);\\n\\n pointer-events: none;\\n\\n transition:\\n opacity 260ms ease,\\n transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\\n filter 260ms ease;\\n\\n will-change: opacity, transform;\\n}\\n\\n.share-dock-button.is-open .share-dock-actions {\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n filter: blur(0);\\n pointer-events: auto;\\n\\n transition-delay: 120ms;\\n}\\n\\n.share-action-btn {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n width: 40px;\\n height: 40px;\\n\\n border: 0;\\n border-radius: 999px;\\n background: transparent;\\n\\n color: #52525b;\\n font-size: 13px;\\n font-weight: 700;\\n\\n cursor: pointer;\\n\\n opacity: 0;\\n transform: translateY(8px) scale(0.88);\\n\\n transition:\\n opacity 260ms ease,\\n transform 360ms cubic-bezier(0.16, 1, 0.3, 1),\\n background 200ms ease,\\n color 200ms ease;\\n}\\n\\n.share-dock-button.is-open .share-action-btn {\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(1) {\\n transition-delay: 120ms;\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(2) {\\n transition-delay: 160ms;\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(3) {\\n transition-delay: 200ms;\\n}\\n\\n.share-dock-button.is-open .share-copy {\\n transition-delay: 240ms;\\n}\\n\\n.share-action-btn:hover {\\n transform: translateY(-1px) scale(1);\\n}\\n\\n.share-twitter:hover {\\n color: #1da1f2;\\n background: rgba(29, 161, 242, 0.1);\\n}\\n\\n.share-instagram:hover {\\n color: #e1306c;\\n background: rgba(225, 48, 108, 0.1);\\n}\\n\\n.share-linkedin:hover {\\n color: #0a66c2;\\n background: rgba(10, 102, 194, 0.1);\\n}\\n\\n.share-divider {\\n width: 1px;\\n height: 24px;\\n margin: 0;\\n background: #e4e4e7;\\n\\n opacity: 0;\\n transform: scaleY(0.5);\\n\\n transition:\\n opacity 240ms ease 220ms,\\n transform 320ms ease 220ms;\\n}\\n\\n.share-dock-button.is-open .share-divider {\\n opacity: 1;\\n transform: scaleY(1);\\n}\\n\\n.share-copy:hover {\\n background: #f4f4f5;\\n}\\n\\n.share-copy.is-copied {\\n color: #22c55e;\\n background: #f0fdf4;\\n}\\n\\n.check-symbol {\\n display: none;\\n}\\n\\n.share-copy.is-copied .copy-symbol {\\n display: none;\\n}\\n\\n.share-copy.is-copied .check-symbol {\\n display: inline;\\n}\\n\\n.share-dock-trigger:focus-visible,\\n.share-action-btn:focus-visible {\\n outline: 2px solid #18181b;\\n outline-offset: 3px;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Smooth Share Button\\n \\n \\n \\n \\n \\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const shareDockShell = document.querySelector(\\\"#shareDockShell\\\");\\nconst shareDockButton = document.querySelector(\\\"#shareDockButton\\\");\\nconst shareDockTrigger = document.querySelector(\\\"#shareDockTrigger\\\");\\nconst shareDockActions = document.querySelector(\\\"#shareDockActions\\\");\\nconst shareCopyButton = document.querySelector(\\\"#shareCopyButton\\\");\\n\\nfunction openShareDock() {\\n shareDockButton.classList.add(\\\"is-open\\\");\\n shareDockTrigger.setAttribute(\\\"aria-expanded\\\", \\\"true\\\");\\n shareDockActions.setAttribute(\\\"aria-hidden\\\", \\\"false\\\");\\n}\\n\\nfunction closeShareDock() {\\n shareDockButton.classList.remove(\\\"is-open\\\");\\n shareDockTrigger.setAttribute(\\\"aria-expanded\\\", \\\"false\\\");\\n shareDockActions.setAttribute(\\\"aria-hidden\\\", \\\"true\\\");\\n}\\n\\nlet leaveTimeout;\\n\\nshareDockButton.addEventListener(\\\"mouseenter\\\", () => {\\n clearTimeout(leaveTimeout);\\n openShareDock();\\n});\\n\\nshareDockButton.addEventListener(\\\"mouseleave\\\", () => {\\n leaveTimeout = setTimeout(closeShareDock, 150);\\n});\\n\\nshareDockButton.addEventListener(\\\"click\\\", (event) => {\\n // Mobile tap toggle helper\\n if (!shareDockButton.classList.contains(\\\"is-open\\\")) {\\n openShareDock();\\n }\\n});\\n\\ndocument.addEventListener(\\\"mousedown\\\", (event) => {\\n if (!shareDockShell.contains(event.target)) {\\n closeShareDock();\\n }\\n});\\n\\nshareCopyButton.addEventListener(\\\"click\\\", async (event) => {\\n event.stopPropagation();\\n\\n try {\\n await navigator.clipboard.writeText(window.location.href);\\n } catch (error) {\\n console.warn(\\\"Clipboard copy failed:\\\", error);\\n }\\n\\n shareCopyButton.classList.add(\\\"is-copied\\\");\\n\\n setTimeout(() => {\\n shareCopyButton.classList.remove(\\\"is-copied\\\");\\n }, 2000);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"9dc202b0-8096-40f5-83bd-52a85732e815","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c69e5039-a83e-45f0-964d-05a5af92495f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"f5269045-421a-4771-ad09-cc3d8f1395a2","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\\n \",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e7523cc-fce4-47a1-aa2b-6a0197d79b24","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"ef347293-cd21-4e2a-99f1-db2d32898710","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.share-dock-shell {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.share-dock-button {\\n position: relative;\\n width: 120px;\\n height: 48px;\\n\\n overflow: hidden;\\n border: 1px solid #e4e4e7;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\\n\\n transition:\\n width 520ms cubic-bezier(0.16, 1, 0.3, 1),\\n box-shadow 280ms ease,\\n border-color 280ms ease;\\n\\n will-change: width;\\n}\\n\\n.share-dock-button:hover,\\n.share-dock-button.is-open {\\n border-color: #d4d4d8;\\n box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);\\n}\\n\\n.share-dock-button.is-open {\\n width: 204px;\\n}\\n\\n.share-dock-trigger {\\n position: absolute;\\n inset: 0;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 8px;\\n\\n border: 0;\\n background: transparent;\\n color: #18181b;\\n\\n font-size: 14px;\\n font-weight: 500;\\n\\n cursor: pointer;\\n\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n filter: blur(0);\\n\\n transition:\\n opacity 220ms ease,\\n transform 320ms cubic-bezier(0.16, 1, 0.3, 1),\\n filter 220ms ease;\\n\\n will-change: opacity, transform;\\n}\\n\\n.share-dock-button.is-open .share-dock-trigger {\\n opacity: 0;\\n transform: translateY(-10px) scale(0.96);\\n filter: blur(2px);\\n pointer-events: none;\\n}\\n\\n.share-dock-icon {\\n width: 18px;\\n height: 18px;\\n fill: none;\\n stroke: currentColor;\\n stroke-width: 2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\\n\\n.share-dock-actions {\\n position: absolute;\\n inset: 0;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 6px;\\n\\n padding: 0 8px;\\n\\n opacity: 0;\\n transform: translateY(10px) scale(0.96);\\n filter: blur(2px);\\n\\n pointer-events: none;\\n\\n transition:\\n opacity 260ms ease,\\n transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\\n filter 260ms ease;\\n\\n will-change: opacity, transform;\\n}\\n\\n.share-dock-button.is-open .share-dock-actions {\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n filter: blur(0);\\n pointer-events: auto;\\n\\n transition-delay: 120ms;\\n}\\n\\n.share-action-btn {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n width: 40px;\\n height: 40px;\\n\\n border: 0;\\n border-radius: 999px;\\n background: transparent;\\n\\n color: #52525b;\\n font-size: 13px;\\n font-weight: 700;\\n\\n cursor: pointer;\\n\\n opacity: 0;\\n transform: translateY(8px) scale(0.88);\\n\\n transition:\\n opacity 260ms ease,\\n transform 360ms cubic-bezier(0.16, 1, 0.3, 1),\\n background 200ms ease,\\n color 200ms ease;\\n}\\n\\n.share-dock-button.is-open .share-action-btn {\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(1) {\\n transition-delay: 120ms;\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(2) {\\n transition-delay: 160ms;\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(3) {\\n transition-delay: 200ms;\\n}\\n\\n.share-dock-button.is-open .share-copy {\\n transition-delay: 240ms;\\n}\\n\\n.share-action-btn:hover {\\n transform: translateY(-1px) scale(1);\\n}\\n\\n.share-twitter:hover {\\n color: #1da1f2;\\n background: rgba(29, 161, 242, 0.1);\\n}\\n\\n.share-instagram:hover {\\n color: #e1306c;\\n background: rgba(225, 48, 108, 0.1);\\n}\\n\\n.share-linkedin:hover {\\n color: #0a66c2;\\n background: rgba(10, 102, 194, 0.1);\\n}\\n\\n.share-divider {\\n width: 1px;\\n height: 24px;\\n margin: 0;\\n background: #e4e4e7;\\n\\n opacity: 0;\\n transform: scaleY(0.5);\\n\\n transition:\\n opacity 240ms ease 220ms,\\n transform 320ms ease 220ms;\\n}\\n\\n.share-dock-button.is-open .share-divider {\\n opacity: 1;\\n transform: scaleY(1);\\n}\\n\\n.share-copy:hover {\\n background: #f4f4f5;\\n}\\n\\n.share-copy.is-copied {\\n color: #22c55e;\\n background: #f0fdf4;\\n}\\n\\n.check-symbol {\\n display: none;\\n}\\n\\n.share-copy.is-copied .copy-symbol {\\n display: none;\\n}\\n\\n.share-copy.is-copied .check-symbol {\\n display: inline;\\n}\\n\\n.share-dock-trigger:focus-visible,\\n.share-action-btn:focus-visible {\\n outline: 2px solid #18181b;\\n outline-offset: 3px;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d7fca97-a10b-4ba4-a099-1c0a5327d383","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"jfcz5q3io\",\"name\":\"code\",\"code\":\"const shareDockShell = document.querySelector(\\\"#shareDockShell\\\");\\nconst shareDockButton = document.querySelector(\\\"#shareDockButton\\\");\\nconst shareDockTrigger = document.querySelector(\\\"#shareDockTrigger\\\");\\nconst shareDockActions = document.querySelector(\\\"#shareDockActions\\\");\\nconst shareCopyButton = document.querySelector(\\\"#shareCopyButton\\\");\\n\\nfunction openShareDock() {\\n shareDockButton.classList.add(\\\"is-open\\\");\\n shareDockTrigger.setAttribute(\\\"aria-expanded\\\", \\\"true\\\");\\n shareDockActions.setAttribute(\\\"aria-hidden\\\", \\\"false\\\");\\n}\\n\\nfunction closeShareDock() {\\n shareDockButton.classList.remove(\\\"is-open\\\");\\n shareDockTrigger.setAttribute(\\\"aria-expanded\\\", \\\"false\\\");\\n shareDockActions.setAttribute(\\\"aria-hidden\\\", \\\"true\\\");\\n}\\n\\nlet leaveTimeout;\\n\\nshareDockButton.addEventListener(\\\"mouseenter\\\", () => {\\n clearTimeout(leaveTimeout);\\n openShareDock();\\n});\\n\\nshareDockButton.addEventListener(\\\"mouseleave\\\", () => {\\n leaveTimeout = setTimeout(closeShareDock, 150);\\n});\\n\\nshareDockButton.addEventListener(\\\"click\\\", (event) => {\\n // Mobile tap toggle helper\\n if (!shareDockButton.classList.contains(\\\"is-open\\\")) {\\n openShareDock();\\n }\\n});\\n\\ndocument.addEventListener(\\\"mousedown\\\", (event) => {\\n if (!shareDockShell.contains(event.target)) {\\n closeShareDock();\\n }\\n});\\n\\nshareCopyButton.addEventListener(\\\"click\\\", async (event) => {\\n event.stopPropagation();\\n\\n try {\\n await navigator.clipboard.writeText(window.location.href);\\n } catch (error) {\\n console.warn(\\\"Clipboard copy failed:\\\", error);\\n }\\n\\n shareCopyButton.classList.add(\\\"is-copied\\\");\\n\\n setTimeout(() => {\\n shareCopyButton.classList.remove(\\\"is-copied\\\");\\n }, 2000);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"57ab1cb5-679f-4f77-b414-aae8bdf4eb5b","type":"divider","props":{},"children":[]},{"id":"eb9f5dba-829e-43c2-8448-b43dbb2e3d17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"10f7be69-0359-440c-a4fc-8874261c6223","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"f8891eb5-c895-45af-9d42-12c723b5f949","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\nThis component creates a compact share button that expands into a small social share dock. On hover or tap, the main ","styles":{}},{"type":"text","text":"Share","styles":{"code":true}},{"type":"text","text":" trigger fades upward, the dock expands wider, and the social action buttons appear one by one.","styles":{}}],"children":[]},{"id":"8ab28646-c1c3-42d3-865f-f6d233fd3af4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"b3dde82c-66a8-4872-84f2-cb11307a86cc","type":"procode","props":{"code":"Page\n└── share-dock-shell\n └── share-dock-button\n ├── share-dock-trigger\n │ ├── share icon\n │ └── Share text\n │\n └── share-dock-actions\n ├── X button\n ├── IG button\n ├── LinkedIn button\n ├── divider\n └── copy button","language":"javascript","filename":"","files":"[{\"id\":\"c48h0kwxq\",\"name\":\"code\",\"code\":\"Page\\n└── share-dock-shell\\n └── share-dock-button\\n ├── share-dock-trigger\\n │ ├── share icon\\n │ └── Share text\\n │\\n └── share-dock-actions\\n ├── X button\\n ├── IG button\\n ├── LinkedIn button\\n ├── divider\\n └── copy button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41f3ab4f-3c84-49b8-8a37-e0c1e879584b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"2e0f4a97-258d-4810-844a-e7040e091d2b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"u0ql6xhyt\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d99df87c-46f5-4360-8f84-79a8395b1788","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".share-dock-button","styles":{"code":true}},{"type":"text","text":" is the animated wrapper.","styles":{}}],"children":[]},{"id":"570eb124-c327-426a-acf7-17c470cc362c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".share-dock-trigger","styles":{"code":true}},{"type":"text","text":" is the default visible button.","styles":{}}],"children":[]},{"id":"02554eaf-30e0-439d-a73e-83de7ead9458","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".share-dock-actions","styles":{"code":true}},{"type":"text","text":" is the hidden share menu that appears when the wrapper gets ","styles":{}},{"type":"text","text":".is-open","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b999117c-abac-4e71-90fa-40d92252e338","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow","styles":{}}],"children":[]},{"id":"959866ab-aff8-4453-83bb-4f3e0cbd52eb","type":"procode","props":{"code":"body {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7ij72v8hf\",\"name\":\"code\",\"code\":\"body {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"263b4177-aecc-4a76-9785-fea20fbcba18","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The body centers the component on the page.","styles":{}}],"children":[]},{"id":"c0f6b457-ddaa-4991-897f-0b781c3a2ed7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Dock Base Flow","styles":{}}],"children":[]},{"id":"642ee64c-1fad-4099-8d4d-7a5499a19441","type":"procode","props":{"code":".share-dock-button {\n position: relative;\n width: 120px;\n height: 48px;\n overflow: hidden;\n border: 1px solid #e4e4e7;\n border-radius: 999px;\n background: #ffffff;\n transition:\n width 520ms cubic-bezier(0.16, 1, 0.3, 1),\n box-shadow 280ms ease,\n border-color 280ms ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"k0bdx08bt\",\"name\":\"code\",\"code\":\".share-dock-button {\\n position: relative;\\n width: 120px;\\n height: 48px;\\n overflow: hidden;\\n border: 1px solid #e4e4e7;\\n border-radius: 999px;\\n background: #ffffff;\\n transition:\\n width 520ms cubic-bezier(0.16, 1, 0.3, 1),\\n box-shadow 280ms ease,\\n border-color 280ms ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da7f0450-cdc2-4819-afdc-cfa5c6f63897","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default state:","styles":{}}],"children":[]},{"id":"20e69e37-1400-4175-8aaf-20cf25cec20f","type":"procode","props":{"code":"width: 120px\nheight: 48px\nshape: pill\ncontent: Share trigger","language":"javascript","filename":"","files":"[{\"id\":\"pzj6ir131\",\"name\":\"code\",\"code\":\"width: 120px\\nheight: 48px\\nshape: pill\\ncontent: Share trigger\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"365fedf9-c9b8-4aa8-8137-9b7b4ffd631a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The wrapper uses ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" so the trigger and action menu can slide and fade inside the same pill shape.","styles":{}}],"children":[]},{"id":"9ebf06a9-3c94-4e75-adb0-d69c08df2d20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open State Flow","styles":{}}],"children":[]},{"id":"52ca8ecb-08ed-4f2c-acaf-c158e0029b65","type":"procode","props":{"code":".share-dock-button.is-open {\n width: 204px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o6by581y4\",\"name\":\"code\",\"code\":\".share-dock-button.is-open {\\n width: 204px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"09617cd6-7b7b-4a2f-95f7-5cd853e65586","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When ","styles":{}},{"type":"text","text":".is-open","styles":{"code":true}},{"type":"text","text":" is added, the dock expands horizontally.","styles":{}}],"children":[]},{"id":"b70e37db-1ffb-4431-98e9-c9e19bb099cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"266c871f-a252-4730-8404-4dce5701d24f","type":"procode","props":{"code":"closed width: 120px\n↓\nopen\n↓\nexpanded width: 204px","language":"javascript","filename":"","files":"[{\"id\":\"cfhqbs1xx\",\"name\":\"code\",\"code\":\"closed width: 120px\\n↓\\nopen\\n↓\\nexpanded width: 204px\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"beb33f89-f928-4be8-b016-19f23c0f68ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Trigger Hide Flow","styles":{}}],"children":[]},{"id":"e2c581e4-c66e-4812-99fb-c3b56e7a036a","type":"procode","props":{"code":".share-dock-button.is-open .share-dock-trigger {\n opacity: 0;\n transform: translateY(-10px) scale(0.96);\n filter: blur(2px);\n pointer-events: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"edsqxjtfm\",\"name\":\"code\",\"code\":\".share-dock-button.is-open .share-dock-trigger {\\n opacity: 0;\\n transform: translateY(-10px) scale(0.96);\\n filter: blur(2px);\\n pointer-events: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aec4b8e3-e662-44ae-9e20-39495eb32497","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the dock opens, the ","styles":{}},{"type":"text","text":"Share","styles":{"code":true}},{"type":"text","text":" trigger fades out, moves upward, shrinks slightly, and blurs.","styles":{}}],"children":[]},{"id":"630e1184-da40-4673-808d-818fc95c29fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Actions Reveal Flow","styles":{}}],"children":[]},{"id":"27064039-3446-4648-81a5-2023d7667ed4","type":"procode","props":{"code":".share-dock-actions {\n opacity: 0;\n transform: translateY(10px) scale(0.96);\n filter: blur(2px);\n pointer-events: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"w9sebeb03\",\"name\":\"code\",\"code\":\".share-dock-actions {\\n opacity: 0;\\n transform: translateY(10px) scale(0.96);\\n filter: blur(2px);\\n pointer-events: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87c71920-42c2-47af-a340-0ea6206f024d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default action state:","styles":{}}],"children":[]},{"id":"70bf7c22-87d1-49ab-ab4a-8669649a4189","type":"procode","props":{"code":"hidden\nslightly below\nslightly smaller\nblurred\nnot clickable","language":"javascript","filename":"","files":"[{\"id\":\"ksfpkpdns\",\"name\":\"code\",\"code\":\"hidden\\nslightly below\\nslightly smaller\\nblurred\\nnot clickable\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b366eb4f-10e2-41a0-9cb3-47a46ddbdc5d","type":"procode","props":{"code":".share-dock-button.is-open .share-dock-actions {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n pointer-events: auto;\n transition-delay: 120ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xj3tekald\",\"name\":\"code\",\"code\":\".share-dock-button.is-open .share-dock-actions {\\n opacity: 1;\\n transform: translateY(0) scale(1);\\n filter: blur(0);\\n pointer-events: auto;\\n transition-delay: 120ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78cc47bd-eab9-467d-b3fd-fc1638c52f41","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open action state:","styles":{}}],"children":[]},{"id":"b119abd9-2f09-4c19-b507-06210b8745b1","type":"procode","props":{"code":"visible\nnormal position\nnormal scale\nclear\nclickable","language":"javascript","filename":"","files":"[{\"id\":\"bskp3ii7q\",\"name\":\"code\",\"code\":\"visible\\nnormal position\\nnormal scale\\nclear\\nclickable\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"256be3f5-97f9-4b2b-9e6e-f010b5826e36","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stagger Flow","styles":{}}],"children":[]},{"id":"c5b099e7-0fbc-4ad5-82ea-227d82296b76","type":"procode","props":{"code":".share-dock-button.is-open .share-action-btn:nth-child(1) {\n transition-delay: 120ms;\n}\n\n.share-dock-button.is-open .share-action-btn:nth-child(2) {\n transition-delay: 160ms;\n}\n\n.share-dock-button.is-open .share-action-btn:nth-child(3) {\n transition-delay: 200ms;\n}\n\n.share-dock-button.is-open .share-copy {\n transition-delay: 240ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qklhywshr\",\"name\":\"code\",\"code\":\".share-dock-button.is-open .share-action-btn:nth-child(1) {\\n transition-delay: 120ms;\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(2) {\\n transition-delay: 160ms;\\n}\\n\\n.share-dock-button.is-open .share-action-btn:nth-child(3) {\\n transition-delay: 200ms;\\n}\\n\\n.share-dock-button.is-open .share-copy {\\n transition-delay: 240ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84625660-9f33-4798-9335-bccd85920071","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each action button appears with a small delay.","styles":{}}],"children":[]},{"id":"86fefd79-1e54-438c-bc12-a8d0fb514978","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"edf69d53-a340-4a23-a093-70f8bbf3294f","type":"procode","props":{"code":"X appears first\n↓\nIG appears second\n↓\nLinkedIn appears third\n↓\nCopy appears last","language":"javascript","filename":"","files":"[{\"id\":\"rstannkt4\",\"name\":\"code\",\"code\":\"X appears first\\n↓\\nIG appears second\\n↓\\nLinkedIn appears third\\n↓\\nCopy appears last\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e7e31c0-61f1-48e4-9da7-d8fa42583370","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Hover Color Flow","styles":{}}],"children":[]},{"id":"b3f8295b-598a-4827-a918-7b2022834aed","type":"procode","props":{"code":".share-twitter:hover {\n color: #1da1f2;\n background: rgba(29, 161, 242, 0.1);\n}\n\n.share-instagram:hover {\n color: #e1306c;\n background: rgba(225, 48, 108, 0.1);\n}\n\n.share-linkedin:hover {\n color: #0a66c2;\n background: rgba(10, 102, 194, 0.1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"j7kfrnrhu\",\"name\":\"code\",\"code\":\".share-twitter:hover {\\n color: #1da1f2;\\n background: rgba(29, 161, 242, 0.1);\\n}\\n\\n.share-instagram:hover {\\n color: #e1306c;\\n background: rgba(225, 48, 108, 0.1);\\n}\\n\\n.share-linkedin:hover {\\n color: #0a66c2;\\n background: rgba(10, 102, 194, 0.1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f8ebdf77-edb6-4fda-89a2-63189529e5a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each social button gets its own hover color.","styles":{}}],"children":[]},{"id":"fd960b71-62ca-4b0e-87b7-5b13f93db409","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Copy State Flow","styles":{}}],"children":[]},{"id":"1425be29-cdaf-440a-8cb5-cd2c94900b7c","type":"procode","props":{"code":".check-symbol {\n display: none;\n}\n\n.share-copy.is-copied .copy-symbol {\n display: none;\n}\n\n.share-copy.is-copied .check-symbol {\n display: inline;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mjlcqliyv\",\"name\":\"code\",\"code\":\".check-symbol {\\n display: none;\\n}\\n\\n.share-copy.is-copied .copy-symbol {\\n display: none;\\n}\\n\\n.share-copy.is-copied .check-symbol {\\n display: inline;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a32799ed-1867-4a66-ae43-f50340ae4f07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default copy state shows:","styles":{}}],"children":[]},{"id":"290021ae-0268-49be-a592-6eadd4096198","type":"procode","props":{"code":"⧉","language":"javascript","filename":"","files":"[{\"id\":\"ou5apleno\",\"name\":\"code\",\"code\":\"⧉\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b81414a9-66cd-47c6-9689-17f3a9f0c59e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Copied state shows:","styles":{}}],"children":[]},{"id":"fb0c12ef-81a1-47e1-b98a-ed861c67abcb","type":"procode","props":{"code":"✓","language":"javascript","filename":"","files":"[{\"id\":\"479c1ptra\",\"name\":\"code\",\"code\":\"✓\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7937b79e-0c39-414b-b651-f3e423347a36","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Setup Flow","styles":{}}],"children":[]},{"id":"37d758e4-4621-4640-ad6d-73848339e73c","type":"procode","props":{"code":"const shareDockShell = document.querySelector(\"#shareDockShell\");\nconst shareDockButton = document.querySelector(\"#shareDockButton\");\nconst shareDockTrigger = document.querySelector(\"#shareDockTrigger\");\nconst shareDockActions = document.querySelector(\"#shareDockActions\");\nconst shareCopyButton = document.querySelector(\"#shareCopyButton\");","language":"javascript","filename":"","files":"[{\"id\":\"w7b93b5i8\",\"name\":\"code\",\"code\":\"const shareDockShell = document.querySelector(\\\"#shareDockShell\\\");\\nconst shareDockButton = document.querySelector(\\\"#shareDockButton\\\");\\nconst shareDockTrigger = document.querySelector(\\\"#shareDockTrigger\\\");\\nconst shareDockActions = document.querySelector(\\\"#shareDockActions\\\");\\nconst shareCopyButton = document.querySelector(\\\"#shareCopyButton\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4724330f-6996-452b-b21e-1685a22cb4b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript gets the wrapper, trigger, action menu, and copy button.","styles":{}}],"children":[]},{"id":"61cfea30-1205-4919-9e77-85aa3fe5317c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open Function Flow","styles":{}}],"children":[]},{"id":"59e67f01-af23-4e17-ac8d-8cca129d568e","type":"procode","props":{"code":"function openShareDock() {\n shareDockButton.classList.add(\"is-open\");\n shareDockTrigger.setAttribute(\"aria-expanded\", \"true\");\n shareDockActions.setAttribute(\"aria-hidden\", \"false\");\n}","language":"javascript","filename":"","files":"[{\"id\":\"6rz3jgs9l\",\"name\":\"code\",\"code\":\"function openShareDock() {\\n shareDockButton.classList.add(\\\"is-open\\\");\\n shareDockTrigger.setAttribute(\\\"aria-expanded\\\", \\\"true\\\");\\n shareDockActions.setAttribute(\\\"aria-hidden\\\", \\\"false\\\");\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9f06d41f-a45c-4152-96d6-d000ac5cd49a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When open:","styles":{}}],"children":[]},{"id":"1e9bcfff-165f-4bd6-bbcc-4236ee372f43","type":"procode","props":{"code":"Add .is-open\n↓\nExpand dock width\n↓\nHide Share trigger\n↓\nShow action buttons\n↓\nUpdate aria-expanded to true\n↓\nUpdate aria-hidden to false","language":"javascript","filename":"","files":"[{\"id\":\"0d7ytvz4l\",\"name\":\"code\",\"code\":\"Add .is-open\\n↓\\nExpand dock width\\n↓\\nHide Share trigger\\n↓\\nShow action buttons\\n↓\\nUpdate aria-expanded to true\\n↓\\nUpdate aria-hidden to false\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dad69060-3a45-41db-93c1-397b1553e1b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Close Function Flow","styles":{}}],"children":[]},{"id":"2932d12c-cd76-4a2f-9252-b384b2e10b7c","type":"procode","props":{"code":"function closeShareDock() {\n shareDockButton.classList.remove(\"is-open\");\n shareDockTrigger.setAttribute(\"aria-expanded\", \"false\");\n shareDockActions.setAttribute(\"aria-hidden\", \"true\");\n}","language":"javascript","filename":"","files":"[{\"id\":\"ht9xche4u\",\"name\":\"code\",\"code\":\"function closeShareDock() {\\n shareDockButton.classList.remove(\\\"is-open\\\");\\n shareDockTrigger.setAttribute(\\\"aria-expanded\\\", \\\"false\\\");\\n shareDockActions.setAttribute(\\\"aria-hidden\\\", \\\"true\\\");\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd083f22-4bcb-4b0f-b728-cc1e7a3525c5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When closed:","styles":{}}],"children":[]},{"id":"cf2d4280-d74c-45d3-9757-f1151b526fae","type":"procode","props":{"code":"Remove .is-open\n↓\nReturn dock width to 120px\n↓\nShow Share trigger\n↓\nHide action buttons\n↓\nUpdate aria-expanded to false\n↓\nUpdate aria-hidden to true","language":"javascript","filename":"","files":"[{\"id\":\"qvyxzsybw\",\"name\":\"code\",\"code\":\"Remove .is-open\\n↓\\nReturn dock width to 120px\\n↓\\nShow Share trigger\\n↓\\nHide action buttons\\n↓\\nUpdate aria-expanded to false\\n↓\\nUpdate aria-hidden to true\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90fd1b6c-112f-4f28-a668-cdf831acc128","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow","styles":{}}],"children":[]},{"id":"cc7a3a86-724b-434f-b2df-339c38dcf153","type":"procode","props":{"code":"shareDockButton.addEventListener(\"mouseenter\", () => {\n clearTimeout(leaveTimeout);\n openShareDock();\n});\n\nshareDockButton.addEventListener(\"mouseleave\", () => {\n leaveTimeout = setTimeout(closeShareDock, 150);\n});","language":"javascript","filename":"","files":"[{\"id\":\"2mr2ugd63\",\"name\":\"code\",\"code\":\"shareDockButton.addEventListener(\\\"mouseenter\\\", () => {\\n clearTimeout(leaveTimeout);\\n openShareDock();\\n});\\n\\nshareDockButton.addEventListener(\\\"mouseleave\\\", () => {\\n leaveTimeout = setTimeout(closeShareDock, 150);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1de8bd35-5496-47c3-9f70-05e7c2cd51d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On desktop:","styles":{}}],"children":[]},{"id":"dd35712a-efe5-4487-ab4e-28a227f46070","type":"procode","props":{"code":"mouseenter\n↓\nclear close delay\n↓\nopen dock\n\nmouseleave\n↓\nwait 150ms\n↓\nclose dock","language":"javascript","filename":"","files":"[{\"id\":\"pmszvegz7\",\"name\":\"code\",\"code\":\"mouseenter\\n↓\\nclear close delay\\n↓\\nopen dock\\n\\nmouseleave\\n↓\\nwait 150ms\\n↓\\nclose dock\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"be9eb216-f49e-438f-ad50-1acdd3f32a83","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The delay makes the dock feel smoother and prevents it from closing too aggressively.","styles":{}}],"children":[]},{"id":"2d5191ba-5323-46e9-9f6e-365fa7edb3b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Mobile Tap Flow","styles":{}}],"children":[]},{"id":"b2d306be-135a-404c-b5f9-2455e0d6f068","type":"procode","props":{"code":"shareDockButton.addEventListener(\"click\", (event) => {\n if (!shareDockButton.classList.contains(\"is-open\")) {\n openShareDock();\n }\n});","language":"javascript","filename":"","files":"[{\"id\":\"yqt4paoh4\",\"name\":\"code\",\"code\":\"shareDockButton.addEventListener(\\\"click\\\", (event) => {\\n if (!shareDockButton.classList.contains(\\\"is-open\\\")) {\\n openShareDock();\\n }\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"885a16b0-aba2-446f-b6da-3618eb5de765","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On mobile or click interaction, tapping the closed dock opens it.","styles":{}}],"children":[]},{"id":"0f6939a4-c1fa-4b10-9251-269fffd41a5b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Outside Click Flow","styles":{}}],"children":[]},{"id":"60effc2a-6695-4bd4-9daa-8a4d4d08436a","type":"procode","props":{"code":"document.addEventListener(\"mousedown\", (event) => {\n if (!shareDockShell.contains(event.target)) {\n closeShareDock();\n }\n});","language":"javascript","filename":"","files":"[{\"id\":\"npmwinoy0\",\"name\":\"code\",\"code\":\"document.addEventListener(\\\"mousedown\\\", (event) => {\\n if (!shareDockShell.contains(event.target)) {\\n closeShareDock();\\n }\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"77f70491-039c-4f78-830d-6e607a41e195","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the user clicks outside the dock, it closes.","styles":{}}],"children":[]},{"id":"df798baa-9be1-480b-af39-1ba577dc2265","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Copy Link Flow","styles":{}}],"children":[]},{"id":"9c710a48-d45b-4bf1-aea9-02612c03df71","type":"procode","props":{"code":"shareCopyButton.addEventListener(\"click\", async (event) => {\n event.stopPropagation();\n\n try {\n await navigator.clipboard.writeText(window.location.href);\n } catch (error) {\n console.warn(\"Clipboard copy failed:\", error);\n }\n\n shareCopyButton.classList.add(\"is-copied\");\n\n setTimeout(() => {\n shareCopyButton.classList.remove(\"is-copied\");\n }, 2000);\n});","language":"javascript","filename":"","files":"[{\"id\":\"53nreu0jr\",\"name\":\"code\",\"code\":\"shareCopyButton.addEventListener(\\\"click\\\", async (event) => {\\n event.stopPropagation();\\n\\n try {\\n await navigator.clipboard.writeText(window.location.href);\\n } catch (error) {\\n console.warn(\\\"Clipboard copy failed:\\\", error);\\n }\\n\\n shareCopyButton.classList.add(\\\"is-copied\\\");\\n\\n setTimeout(() => {\\n shareCopyButton.classList.remove(\\\"is-copied\\\");\\n }, 2000);\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2ad3960-72cb-476e-b2db-4c36cc0a2502","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Copy action flow:","styles":{}}],"children":[]},{"id":"1a1013f6-8b8e-498b-9627-ac0085eb484d","type":"procode","props":{"code":"Click copy button\n↓\nStop click from bubbling\n↓\nCopy current page URL\n↓\nAdd .is-copied\n↓\nShow check icon\n↓\nWait 2 seconds\n↓\nRemove .is-copied\n↓\nShow copy icon again","language":"javascript","filename":"","files":"[{\"id\":\"5pxwzh65i\",\"name\":\"code\",\"code\":\"Click copy button\\n↓\\nStop click from bubbling\\n↓\\nCopy current page URL\\n↓\\nAdd .is-copied\\n↓\\nShow check icon\\n↓\\nWait 2 seconds\\n↓\\nRemove .is-copied\\n↓\\nShow copy icon again\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"315f1b77-9e07-47a8-acf7-435cfdaaac79","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Full Interaction Flow","styles":{}}],"children":[]},{"id":"83a6035e-a2e4-485f-afbd-587146cc10fb","type":"procode","props":{"code":"Default\n↓\nDock shows Share icon + text\n↓\nUser hovers or taps\n↓\nDock expands from 120px to 204px\n↓\nShare trigger fades up and blurs\n↓\nAction dock fades in from below\n↓\nSocial buttons appear with stagger\n↓\nUser clicks copy\n↓\nURL is copied\n↓\nCopy icon changes to checkmark\n↓\nUser leaves or clicks outside\n↓\nDock closes","language":"javascript","filename":"","files":"[{\"id\":\"s9csfn0xo\",\"name\":\"code\",\"code\":\"Default\\n↓\\nDock shows Share icon + text\\n↓\\nUser hovers or taps\\n↓\\nDock expands from 120px to 204px\\n↓\\nShare trigger fades up and blurs\\n↓\\nAction dock fades in from below\\n↓\\nSocial buttons appear with stagger\\n↓\\nUser clicks copy\\n↓\\nURL is copied\\n↓\\nCopy icon changes to checkmark\\n↓\\nUser leaves or clicks outside\\n↓\\nDock closes\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72c2d874-5a46-46c2-ba4b-f1458fca3dd7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]