refactor(client): share the line wrapping icon

packages/client/ui-primitives/src/JsonTree.tsx

@@ -6,7 +6,7 @@ import type {
   MouseEvent as ReactMouseEvent,
   ReactNode,
 } from 'react'
-import { IconCheckOutline16, IconCopyOutline16 } from './icons/index.tsx'
+import { IconCheckOutline16, IconCopyOutline16, IconWrapLinesOutline16 } from './icons/index.tsx'
 import { Menu } from './Menu.tsx'
 import type { MenuEntry } from './Menu.tsx'
 import css from './JsonTree.module.css'
@@ -334,18 +334,7 @@ function JsonString({
                 stringWrapping.setDefault(next)
               }}
             >
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M1.5 3.5h13M1.5 7.5h10.25a2.5 2.5 0 0 1 0 5H8m2-2-2 2 2 2M1.5 11.5h3" />
-              </svg>
+              <IconWrapLinesOutline16 size={12} />
             </button>
           )}
           <button

packages/client/ui-primitives/src/icons/index.tsx

@@ -936,3 +936,11 @@ export const IconArchiveOutline20 = ({ size = 20, className }: IconProps) => (
     <path d="M12.7962 12.5661V11.0832H7.20548V12.5661L12.7962 12.5661Z" fill="currentColor" />
   </svg>
 )
+
+/** Line-wrapping toggle glyph. */
+export const IconWrapLinesOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" aria-hidden="true">
+    <path d="M1.5 3.5h13M1.5 7.5h10.25a2.5 2.5 0 0 1 0 5H8m2-2-2 2 2 2M1.5 11.5h3" />
+  </svg>
+)

packages/client/ui-primitives/tests/icons.client.spec.tsx

@@ -17,8 +17,8 @@ const icons = Object.fromEntries(
 const iconNames = Object.keys(icons)
 
 describe('ic_ds_ icon set', () => {
-  it('exports the full icon set (46 deepsuite + 21 figma extracts + eight product glyphs outside those sets)', () => {
-    expect(iconNames.length).toBe(75)
+  it('exports the full icon set (46 deepsuite + 21 figma extracts + nine product glyphs outside those sets)', () => {
+    expect(iconNames.length).toBe(76)
   })
 
   it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', (name) => {

packages/client/ui-trajectory/src/client/TrajectoryTable.tsx

@@ -8,6 +8,7 @@ import {
   IconCheckOutline16,
   IconChevronRightOutline14,
   IconCodeOutline16,
+  IconWrapLinesOutline16,
   IconCopyOutline16,
   IconSettingsOutline16,
   IconSparkle16,
@@ -1869,10 +1870,7 @@ function ProgramInput({ program, rawInput, initialWrapped, stringWrapping, onOpe
             stringWrapping?.setDefault(next)
           }}
         >
-          <svg width="12" height="12" viewBox="0 0 16 16" fill="none"
-            stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" aria-hidden="true">
-            <path d="M1.5 3.5h13M1.5 7.5h10.25a2.5 2.5 0 0 1 0 5H8m2-2-2 2 2 2M1.5 11.5h3" />
-          </svg>
+          <IconWrapLinesOutline16 size={12} />
         </button>
       )}
       {onOpen === undefined && (