shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

Merge branch 'integration/sw-home-menu' into feature/sw-home-menu

Browse Source 
Integrate the SW home (logo) menu into SWHeader for SW general mode only.
SW viewer mode code and stories are unchanged.

- Resolve conflicts: keep both sw-home-menu and sw-viewer exports;
  renumber AI docs (catalog viewer 8->9, patterns home menu 7->8,
  design rules home menu 11->12)
- SWHeader: start the home menu after the file name when it sits
  inside controls, so the file name stays visible
- AI guides: mark home menu as general-mode only; forbid it in viewer
  mode (AI_USAGE, catalog, design rules, patterns, VIEWER.md, AI_GUIDE)
- Tests: ignore wildcard identifiers in ai-docs check; update expected
  Storybook SW titles (SW/Tool removed, SW/Viewer added)
- Add merge QA report docs/sw/sw-home-menu-merge-2026-10-19.md
This commit is contained in:
shkim4 committed 2026-10-19 18:21:19 +09:00
2 parents b434f272e2 1472e51f47
commit 3a5e29f2fa
122 files changed
+6547 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/sw/assets/home-menu/662-67331_recent-files.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

src/sw/assets/home-menu/662-67471_file-preview-2depth.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

src/sw/assets/home-menu/bundle-hover.svg
+26
View File
@@ -0,0 +1,26 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="inventory_2">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M17.5 4H5.5C4.75 4 4 4.675 4 5.5V7.7575C4 8.2975 4.3225 8.7625 4.75 9.025V16.5C4.75 17.325 5.575 18 6.25 18H16.75C17.425 18 18.25 17.325 18.25 16.5V9.025C18.6775 8.7625 19 8.2975 19 7.7575V5.5C19 4.675 18.25 4 17.5 4ZM16.75 16.5H6.25V9.25H16.75V16.5ZM17.5 7.75H5.5V5.5H17.5V7.75Z" fill="#FF5C00"/>
<path d="M13.75 11.5H9.25V13H13.75V11.5Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="23" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/bundle.svg
+26
View File
@@ -0,0 +1,26 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="inventory_2">
<g id="Vector" filter="url(#filter0_dd_0_451)">
<path d="M17.5 4H5.5C4.75 4 4 4.675 4 5.5V7.7575C4 8.2975 4.3225 8.7625 4.75 9.025V16.5C4.75 17.325 5.575 18 6.25 18H16.75C17.425 18 18.25 17.325 18.25 16.5V9.025C18.6775 8.7625 19 8.2975 19 7.7575V5.5C19 4.675 18.25 4 17.5 4ZM16.75 16.5H6.25V9.25H16.75V16.5ZM17.5 7.75H5.5V5.5H17.5V7.75Z" fill="#B6B4AF"/>
<path d="M13.75 11.5H9.25V13H13.75V11.5Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_451" x="0" y="0" width="23" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_451"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_451" result="effect2_dropShadow_0_451"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_451" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/display-hover.svg
+28
View File
@@ -0,0 +1,28 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="monitor" clip-path="url(#clip0_0_10)">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M18.4 3.55H5.6C4.72 3.55 4 4.27 4 5.15V13.95C4 14.83 4.72 15.55 5.6 15.55H9.6L8.8 16.35V17.95H15.2V16.35L14.4 15.55H18.4C19.28 15.55 20 14.83 20 13.95V5.15C20 4.27 19.28 3.55 18.4 3.55ZM18.4 13.95H5.6V5.15H18.4V13.95Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="-0.266667" y="-0.716667" width="24.5333" height="22.9333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2.13333"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.533333"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
<clipPath id="clip0_0_10">
<rect width="24" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/sw/assets/home-menu/display.svg
+28
View File
@@ -0,0 +1,28 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="monitor" clip-path="url(#clip0_0_405)">
<g id="Vector" filter="url(#filter0_dd_0_405)">
<path d="M18.4 3.55H5.6C4.72 3.55 4 4.27 4 5.15V13.95C4 14.83 4.72 15.55 5.6 15.55H9.6L8.8 16.35V17.95H15.2V16.35L14.4 15.55H18.4C19.28 15.55 20 14.83 20 13.95V5.15C20 4.27 19.28 3.55 18.4 3.55ZM18.4 13.95H5.6V5.15H18.4V13.95Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_405" x="-0.266667" y="-0.716667" width="24.5333" height="22.9333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2.13333"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_405"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.533333"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_405" result="effect2_dropShadow_0_405"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_405" result="shape"/>
</filter>
<clipPath id="clip0_0_405">
<rect width="24" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/sw/assets/home-menu/export-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22.52" height="23.2775" viewBox="0 0 22.52 23.2775" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="file_open" opacity="0.9">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M12.25 19H5.5C4.675 19 4 18.325 4 17.5V5.5C4 4.675 4.675 4 5.5 4H11.5L16 8.5V13H14.5V9.25H10.75V5.5H5.5V17.5H12.25V19ZM17.02 18.745V17.065L14.8075 19.2775L13.75 18.22L15.9625 16H14.2825V14.5H18.52V18.745H17.02Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="22.52" height="23.2775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/sw/assets/home-menu/export.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22.52" height="23.2775" viewBox="0 0 22.52 23.2775" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="file_open" opacity="0.9">
<g id="Vector" filter="url(#filter0_dd_0_360)">
<path d="M12.25 19H5.5C4.675 19 4 18.325 4 17.5V5.5C4 4.675 4.675 4 5.5 4H11.5L16 8.5V13H14.5V9.25H10.75V5.5H5.5V17.5H12.25V19ZM17.02 18.745V17.065L14.8075 19.2775L13.75 18.22L15.9625 16H14.2825V14.5H18.52V18.745H17.02Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_360" x="0" y="0" width="22.52" height="23.2775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_360"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_360" result="effect2_dropShadow_0_360"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_360" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/figma-26-10492.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

src/sw/assets/home-menu/figma-26-10591.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

src/sw/assets/home-menu/figma-662-67267.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

src/sw/assets/home-menu/figma-preview-h1100.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

src/sw/assets/home-menu/file-open-monitor-a.svg
+30
View File
@@ -0,0 +1,30 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="37" height="32" viewBox="0 0 37 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon_dualmonitor" filter="url(#filter0_d_0_259)">
<g id="Union">
<path d="M12 14V13H18V4H4V13H10V14H8V15H10H12H14V14H12Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFE500"/>
<mask id="stroke0_0_259" fill="white">
<path d="M12 14V13H18V4H4V13H10V14H8V15H10H12H14V14H12Z" fill-rule="evenodd" clip-rule="evenodd"/>
</mask>
<path d="M12 13V14H14V15H12H10H8V14H10V13H4V4H18V13H12Z" stroke-width="2" stroke="#264F42" mask="url(#stroke0_0_259)"/>
</g>
<g id="Union_2">
<path d="M27 14V13H33V4H19V13H25V14H23V15H25H27H29V14H27Z" fill-rule="evenodd" clip-rule="evenodd" fill="white"/>
<mask id="stroke1_0_259" fill="white">
<path d="M27 14V13H33V4H19V13H25V14H23V15H25H27H29V14H27Z" fill-rule="evenodd" clip-rule="evenodd"/>
</mask>
<path d="M27 13V14H29V15H27H25H23V14H25V13H19V4H33V13H27Z" stroke-width="2" stroke="#4B7165" mask="url(#stroke1_0_259)"/>
</g>
</g>
<defs>
<filter id="filter0_d_0_259" x="0" y="0" width="37" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_259"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_259" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/sw/assets/home-menu/file-open-monitor-b.svg
+30
View File
@@ -0,0 +1,30 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="37" height="32" viewBox="0 0 37 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon_dualmonitor" filter="url(#filter0_d_0_233)">
<g id="Union">
<path d="M12 14V13H18V4H4V13H10V14H8V15H10H12H14V14H12Z" fill-rule="evenodd" clip-rule="evenodd" fill="white"/>
<mask id="stroke0_0_233" fill="white">
<path d="M12 14V13H18V4H4V13H10V14H8V15H10H12H14V14H12Z" fill-rule="evenodd" clip-rule="evenodd"/>
</mask>
<path d="M12 13V14H14V15H12H10H8V14H10V13H4V4H18V13H12Z" stroke-width="2" stroke="#4B7165" mask="url(#stroke0_0_233)"/>
</g>
<g id="Union_2">
<path d="M27 14V13H33V4H19V13H25V14H23V15H25H27H29V14H27Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFE500"/>
<mask id="stroke1_0_233" fill="white">
<path d="M27 14V13H33V4H19V13H25V14H23V15H25H27H29V14H27Z" fill-rule="evenodd" clip-rule="evenodd"/>
</mask>
<path d="M27 13V14H29V15H27H25H23V14H25V13H19V4H33V13H27Z" stroke-width="2" stroke="#264F42" mask="url(#stroke1_0_233)"/>
</g>
</g>
<defs>
<filter id="filter0_d_0_233" x="0" y="0" width="37" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_233"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_233" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/sw/assets/home-menu/find-open-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24.6989" height="20" viewBox="0 0 24.6989 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="folder_open">
<g id="Union" filter="url(#filter0_dd_0_10)">
<path d="M17.5 5.5H11.5L10 4H5.5C4.675 4 4.0075 4.675 4.0075 5.5L4 14.5C4 15.325 4.675 16 5.5 16H17.5C18.325 16 19 15.325 19 14.5L20.6646 8.25766C20.8339 7.62282 20.3554 7 19.6984 7H19.5H19C19 6.175 18.325 5.5 17.5 5.5ZM5.5 8.5V14.5H17.5L19.1 8.5H5.5Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="24.6989" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/find-open.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24.6989" height="20" viewBox="0 0 24.6989 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="folder_open">
<g id="Union" filter="url(#filter0_dd_0_505)">
<path d="M17.5 5.5H11.5L10 4H5.5C4.675 4 4.0075 4.675 4.0075 5.5L4 14.5C4 15.325 4.675 16 5.5 16H17.5C18.325 16 19 15.325 19 14.5L20.6646 8.25766C20.8339 7.62282 20.3554 7 19.6984 7H19.5H19C19 6.175 18.325 5.5 17.5 5.5ZM5.5 8.5V14.5H17.5L19.1 8.5H5.5Z" fill-rule="evenodd" clip-rule="evenodd" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_505" x="0" y="0" width="24.6989" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_505"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_505" result="effect2_dropShadow_0_505"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_505" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/help-hover.svg
+28
View File
@@ -0,0 +1,28 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="content_paste" clip-path="url(#clip0_0_10)">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M14.25 2.5H11.115C10.8 1.63 9.975 1 9 1C8.025 1 7.2 1.63 6.885 2.5H3.75C2.925 2.5 2.25 3.175 2.25 4V15C2.25 15.825 2.925 16.5 3.75 16.5H14.25C15.075 16.5 15.75 15.825 15.75 15V4C15.75 3.175 15.075 2.5 14.25 2.5ZM9 2.5C9.4125 2.5 9.75 2.8375 9.75 3.25C9.75 3.6625 9.4125 4 9 4C8.5875 4 8.25 3.6625 8.25 3.25C8.25 2.8375 8.5875 2.5 9 2.5ZM14.25 15H3.75V4H5.25V6.25H12.75V4H14.25V15Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="-1.75" y="-3" width="21.5" height="23.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
<clipPath id="clip0_0_10">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/sw/assets/home-menu/help.svg
+28
View File
@@ -0,0 +1,28 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="content_paste" clip-path="url(#clip0_0_344)">
<g id="Vector" filter="url(#filter0_dd_0_344)">
<path d="M14.25 2.5H11.115C10.8 1.63 9.975 1 9 1C8.025 1 7.2 1.63 6.885 2.5H3.75C2.925 2.5 2.25 3.175 2.25 4V15C2.25 15.825 2.925 16.5 3.75 16.5H14.25C15.075 16.5 15.75 15.825 15.75 15V4C15.75 3.175 15.075 2.5 14.25 2.5ZM9 2.5C9.4125 2.5 9.75 2.8375 9.75 3.25C9.75 3.6625 9.4125 4 9 4C8.5875 4 8.25 3.6625 8.25 3.25C8.25 2.8375 8.5875 2.5 9 2.5ZM14.25 15H3.75V4H5.25V6.25H12.75V4H14.25V15Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_344" x="-1.75" y="-3" width="21.5" height="23.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_344"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_344" result="effect2_dropShadow_0_344"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_344" result="shape"/>
</filter>
<clipPath id="clip0_0_344">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/sw/assets/home-menu/inquiry-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="question_answer">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M13.75 5.5V10.75H6.3775L5.5 11.6275V5.5H13.75ZM14.5 4H4.75C4.3375 4 4 4.3375 4 4.75V15.25L7 12.25H14.5C14.9125 12.25 15.25 11.9125 15.25 11.5V4.75C15.25 4.3375 14.9125 4 14.5 4ZM18.25 7H16.75V13.75H7V15.25C7 15.6625 7.3375 16 7.75 16H16L19 19V7.75C19 7.3375 18.6625 7 18.25 7Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="23" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/inquiry.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="question_answer">
<g id="Vector" filter="url(#filter0_dd_0_398)">
<path d="M13.75 5.5V10.75H6.3775L5.5 11.6275V5.5H13.75ZM14.5 4H4.75C4.3375 4 4 4.3375 4 4.75V15.25L7 12.25H14.5C14.9125 12.25 15.25 11.9125 15.25 11.5V4.75C15.25 4.3375 14.9125 4 14.5 4ZM18.25 7H16.75V13.75H7V15.25C7 15.6625 7.3375 16 7.75 16H16L19 19V7.75C19 7.3375 18.6625 7 18.25 7Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_398" x="0" y="0" width="23" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_398"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_398" result="effect2_dropShadow_0_398"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_398" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/new-file-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="insert_drive_file">
<g id="Union" opacity="0.8" filter="url(#filter0_dd_0_10)">
<path d="M11.5 4H5.5C4.675 4 4.0075 4.675 4.0075 5.5L4 17.5C4 18.325 4.6675 19 5.4925 19H14.5C15.325 19 16 18.325 16 17.5V8.5L11.5 4ZM5.5 17.5V5.5H10.75V9.25H14.5V17.5H5.5ZM10 12.5H12V13.5H10V15.5H9V13.5H7V12.5H9V10.5H10V12.5Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="20" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/new-file.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="insert_drive_file">
<g id="Union" opacity="0.8" filter="url(#filter0_dd_0_439)">
<path d="M11.5 4H5.5C4.675 4 4.0075 4.675 4.0075 5.5L4 17.5C4 18.325 4.6675 19 5.4925 19H14.5C15.325 19 16 18.325 16 17.5V8.5L11.5 4ZM5.5 17.5V5.5H10.75V9.25H14.5V17.5H5.5ZM10 12.5H12V13.5H10V15.5H9V13.5H7V12.5H9V10.5H10V12.5Z" fill-rule="evenodd" clip-rule="evenodd" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_439" x="0" y="0" width="20" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_439"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_439" result="effect2_dropShadow_0_439"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_439" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/recent-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22" height="24.5" viewBox="0 0 22 24.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="insert_drive_file">
<g id="Union" filter="url(#filter0_dd_0_10)">
<path d="M5.5 4H11.5L16 8.5V12.7561C15.5308 12.5902 15.026 12.5 14.5 12.5V9.25H10.75V5.5H5.5V17.5H10.0275C10.0865 18.0337 10.2388 18.5393 10.4678 19H5.4925C4.6675 19 4 18.325 4 17.5L4.0075 5.5C4.0075 4.675 4.675 4 5.5 4ZM17 17C17 15.6193 15.8807 14.5 14.5 14.5C13.1193 14.5 12 15.6193 12 17C12 18.3807 13.1193 19.5 14.5 19.5C15.8807 19.5 17 18.3807 17 17ZM14.5 20.5C12.567 20.5 11 18.933 11 17C11 15.067 12.567 13.5 14.5 13.5C16.433 13.5 18 15.067 18 17C18 18.933 16.433 20.5 14.5 20.5ZM15 17.0068V15.5H14V17.4219L14.1465 17.5674L15.1465 18.5674L15.8535 17.8604L15 17.0068Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="22" height="24.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.101961 0 0 0 0 0.0784314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/sw/assets/home-menu/recent.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22" height="24.5" viewBox="0 0 22 24.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="insert_drive_file">
<g id="Union" filter="url(#filter0_dd_0_495)">
<path d="M5.5 4H11.5L16 8.5V12.7561C15.5308 12.5902 15.026 12.5 14.5 12.5V9.25H10.75V5.5H5.5V17.5H10.0275C10.0865 18.0337 10.2388 18.5393 10.4678 19H5.4925C4.6675 19 4 18.325 4 17.5L4.0075 5.5C4.0075 4.675 4.675 4 5.5 4ZM17 17C17 15.6193 15.8807 14.5 14.5 14.5C13.1193 14.5 12 15.6193 12 17C12 18.3807 13.1193 19.5 14.5 19.5C15.8807 19.5 17 18.3807 17 17ZM14.5 20.5C12.567 20.5 11 18.933 11 17C11 15.067 12.567 13.5 14.5 13.5C16.433 13.5 18 15.067 18 17C18 18.933 16.433 20.5 14.5 20.5ZM15 17.0068V15.5H14V17.4219L14.1465 17.5674L15.1465 18.5674L15.8535 17.8604L15 17.0068Z" fill-rule="evenodd" clip-rule="evenodd" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_495" x="0" y="0" width="22" height="24.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.101961 0 0 0 0 0.0784314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_495"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_495" result="effect2_dropShadow_0_495"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_495" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/sw/assets/home-menu/recover-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21" height="22.3601" viewBox="0 0 21 22.3601" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="rotate_left">
<g id="Union" filter="url(#filter0_dd_0_10)">
<path d="M5.33019 7.8981L6.48085 9.05692C6.04834 9.66897 5.76271 10.3626 5.64846 11.0726H4C4.13873 9.93827 4.59573 8.84474 5.33019 7.8981ZM4 12.7048H5.64846C5.76271 13.4229 6.04834 14.1084 6.47269 14.7204L5.32203 15.8793C4.58757 14.9326 4.13873 13.8391 4 12.7048ZM9.65537 18.3601C8.52103 18.2214 7.41933 17.7807 6.47269 17.0462L7.64783 15.8629C8.25989 16.3036 8.94539 16.5811 9.65537 16.7035V18.3601ZM11.2875 4V5.41724C14.511 5.81712 17 8.55911 17 11.8887C17 15.2182 14.511 17.9602 11.2875 18.3601V16.7117C13.6051 16.3199 15.3679 14.3124 15.3679 11.8887C15.3679 9.46495 13.6051 7.45742 11.2875 7.0657V8.4597L7.57439 6.62503L11.2875 4ZM11.25 11.8691V9.67969H9.75V12.4902L11.9697 14.71L13.0303 13.6494L11.25 11.8691Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="21" height="22.3601" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.101961 0 0 0 0 0.0784314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

src/sw/assets/home-menu/recover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21" height="22.3601" viewBox="0 0 21 22.3601" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="rotate_left">
<g id="Union" filter="url(#filter0_dd_0_364)">
<path d="M5.33019 7.8981L6.48085 9.05692C6.04834 9.66897 5.76271 10.3626 5.64846 11.0726H4C4.13873 9.93827 4.59573 8.84474 5.33019 7.8981ZM4 12.7048H5.64846C5.76271 13.4229 6.04834 14.1084 6.47269 14.7204L5.32203 15.8793C4.58757 14.9326 4.13873 13.8391 4 12.7048ZM9.65537 18.3601C8.52103 18.2214 7.41933 17.7807 6.47269 17.0462L7.64783 15.8629C8.25989 16.3036 8.94539 16.5811 9.65537 16.7035V18.3601ZM11.2875 4V5.41724C14.511 5.81712 17 8.55911 17 11.8887C17 15.2182 14.511 17.9602 11.2875 18.3601V16.7117C13.6051 16.3199 15.3679 14.3124 15.3679 11.8887C15.3679 9.46495 13.6051 7.45742 11.2875 7.0657V8.4597L7.57439 6.62503L11.2875 4ZM11.25 11.8691V9.67969H9.75V12.4902L11.9697 14.71L13.0303 13.6494L11.25 11.8691Z" fill-rule="evenodd" clip-rule="evenodd" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_364" x="0" y="0" width="21" height="22.3601" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.101961 0 0 0 0 0.0784314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_364"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_364" result="effect2_dropShadow_0_364"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_364" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

src/sw/assets/home-menu/save-as-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="23.3" height="23" viewBox="0 0 23.3 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="save_as" opacity="0.9">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M17.5 11.05V7L14.5 4H5.5C4.6675 4 4 4.675 4 5.5V16C4 16.825 4.6675 17.5 5.5 17.5H11.05L12.55 16H5.5V5.5H13.8775L16 7.6225V12.55L17.5 11.05ZM13 13C13 14.245 11.995 15.25 10.75 15.25C9.505 15.25 8.5 14.245 8.5 13C8.5 11.755 9.505 10.75 10.75 10.75C11.995 10.75 13 11.755 13 13ZM6.25 6.5H13V8.5H6.25V6.5ZM16.7425 13.9375L18.07 15.265L14.3275 19H13V17.6725L16.7425 13.9375ZM19.1875 14.1325L18.55 14.77L17.2225 13.4425L17.86 12.805C18.01 12.655 18.2425 12.655 18.3925 12.805L19.1875 13.6C19.3375 13.75 19.3375 13.99 19.1875 14.1325Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="23.3" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/sw/assets/home-menu/save-as.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="23.3" height="23" viewBox="0 0 23.3 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="save_as" opacity="0.9">
<g id="Vector" filter="url(#filter0_dd_0_492)">
<path d="M17.5 11.05V7L14.5 4H5.5C4.6675 4 4 4.675 4 5.5V16C4 16.825 4.6675 17.5 5.5 17.5H11.05L12.55 16H5.5V5.5H13.8775L16 7.6225V12.55L17.5 11.05ZM13 13C13 14.245 11.995 15.25 10.75 15.25C9.505 15.25 8.5 14.245 8.5 13C8.5 11.755 9.505 10.75 10.75 10.75C11.995 10.75 13 11.755 13 13ZM6.25 6.5H13V8.5H6.25V6.5ZM16.7425 13.9375L18.07 15.265L14.3275 19H13V17.6725L16.7425 13.9375ZM19.1875 14.1325L18.55 14.77L17.2225 13.4425L17.86 12.805C18.01 12.655 18.2425 12.655 18.3925 12.805L19.1875 13.6C19.3375 13.75 19.3375 13.99 19.1875 14.1325Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_492" x="0" y="0" width="23.3" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_492"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_492" result="effect2_dropShadow_0_492"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_492" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/sw/assets/home-menu/save-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.5" height="21.5" viewBox="0 0 21.5 21.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="save" opacity="0.9">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M14.5 4H5.5C4.6675 4 4 4.675 4 5.5V16C4 16.825 4.6675 17.5 5.5 17.5H16C16.825 17.5 17.5 16.825 17.5 16V7L14.5 4ZM16 16H5.5V5.5H13.8775L16 7.6225V16ZM10.75 10.75C9.505 10.75 8.5 11.755 8.5 13C8.5 14.245 9.505 15.25 10.75 15.25C11.995 15.25 13 14.245 13 13C13 11.755 11.995 10.75 10.75 10.75ZM6.25 6.75H13V8.75H6.25V6.75Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="21.5" height="21.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/save.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.5" height="21.5" viewBox="0 0 21.5 21.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="save" opacity="0.9">
<g id="Vector" filter="url(#filter0_dd_0_455)">
<path d="M14.5 4H5.5C4.6675 4 4 4.675 4 5.5V16C4 16.825 4.6675 17.5 5.5 17.5H16C16.825 17.5 17.5 16.825 17.5 16V7L14.5 4ZM16 16H5.5V5.5H13.8775L16 7.6225V16ZM10.75 10.75C9.505 10.75 8.5 11.755 8.5 13C8.5 14.245 9.505 15.25 10.75 15.25C11.995 15.25 13 14.245 13 13C13 11.755 11.995 10.75 10.75 10.75ZM6.25 6.75H13V8.75H6.25V6.75Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_455" x="0" y="0" width="21.5" height="21.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_455"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_455" result="effect2_dropShadow_0_455"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_455" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/setting-load-hover.svg
+28
View File
@@ -0,0 +1,28 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="save_alt" clip-path="url(#clip0_0_10)">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M14.25 8.75V14H3.75V8.75H2.25V14C2.25 14.825 2.925 15.5 3.75 15.5H14.25C15.075 15.5 15.75 14.825 15.75 14V8.75H14.25ZM9.75 9.2525L11.6925 7.3175L12.75 8.375L9 12.125L5.25 8.375L6.3075 7.3175L8.25 9.2525V2H9.75V9.2525Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="-1.75" y="-2" width="21.5" height="21.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
<clipPath id="clip0_0_10">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/setting-load.svg
+28
View File
@@ -0,0 +1,28 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="save_alt" clip-path="url(#clip0_0_396)">
<g id="Vector" filter="url(#filter0_dd_0_396)">
<path d="M14.25 8.75V14H3.75V8.75H2.25V14C2.25 14.825 2.925 15.5 3.75 15.5H14.25C15.075 15.5 15.75 14.825 15.75 14V8.75H14.25ZM9.75 9.2525L11.6925 7.3175L12.75 8.375L9 12.125L5.25 8.375L6.3075 7.3175L8.25 9.2525V2H9.75V9.2525Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_396" x="-1.75" y="-2" width="21.5" height="21.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_396"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_396" result="effect2_dropShadow_0_396"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_396" result="shape"/>
</filter>
<clipPath id="clip0_0_396">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/setting-save-hover.svg
+42
View File
@@ -0,0 +1,42 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24.3087" height="24.5" viewBox="0 0 24.3087 24.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 2646" filter="url(#filter0_d_0_10)">
<g id="Vector" filter="url(#filter1_d_0_10)">
<path d="M17.5 11V7L14.5 4H5.5C4.6675 4 4 4.675 4 5.5V16C4 16.825 4.6675 17.5 5.5 17.5H11V16H5.5V5.5H13.8775L16 7.6225V11H17.5ZM13 12C13 13.245 11.995 14.25 10.75 14.25C9.505 14.25 8.5 13.245 8.5 12C8.5 10.755 9.505 9.75 10.75 9.75C11.995 9.75 13 10.755 13 12ZM6.25 6.5H13V8.5H6.25V6.5Z" fill="#FF5C00"/>
</g>
<g id="Subtract" filter="url(#filter2_d_0_10)">
<path d="M20.2403 17.74L19.4378 17.1175C19.4528 16.9975 19.4678 16.8775 19.4678 16.75C19.4678 16.6225 19.4603 16.5025 19.4378 16.3825L20.2328 15.76C20.3003 15.7 20.3228 15.6025 20.2778 15.52L19.5278 14.2225C19.4828 14.14 19.3853 14.11 19.2953 14.14L18.3653 14.515C18.1703 14.365 17.9603 14.2375 17.7278 14.1475L17.5853 13.1575C17.5778 13.0675 17.4953 13 17.4053 13H15.9053C15.8153 13 15.7328 13.0675 15.7178 13.1575L15.5753 14.1475C15.3503 14.245 15.1328 14.365 14.9378 14.515L14.0078 14.14C13.9253 14.11 13.8278 14.14 13.7753 14.2225L13.0253 15.52C12.9803 15.6025 12.9953 15.7 13.0703 15.76L13.8653 16.3825C13.8503 16.5025 13.8428 16.6225 13.8428 16.75C13.8428 16.8775 13.8503 16.9975 13.8653 17.1175L13.0703 17.74C13.0028 17.8 12.9803 17.8975 13.0253 17.98L13.7753 19.2775C13.8203 19.36 13.9178 19.39 14.0078 19.36L14.9378 18.985C15.1328 19.135 15.3428 19.2625 15.5753 19.3525L15.7178 20.3425C15.7328 20.4325 15.8078 20.5 15.9053 20.5H17.4053C17.4953 20.5 17.5778 20.4325 17.5928 20.3425L17.7353 19.3525C17.9603 19.255 18.1778 19.135 18.3653 18.985L19.3028 19.36C19.3853 19.39 19.4828 19.36 19.5353 19.2775L20.2853 17.98C20.3303 17.8975 20.3078 17.8 20.2403 17.74ZM16.6562 17.875C16.0338 17.875 15.5312 17.3725 15.5312 16.75C15.5312 16.1275 16.0338 15.625 16.6562 15.625C17.2787 15.625 17.7812 16.1275 17.7812 16.75C17.7812 17.3725 17.2787 17.875 16.6562 17.875Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_d_0_10" x="3" y="3" width="18.3087" height="18.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_10" result="shape"/>
</filter>
<filter id="filter1_d_0_10" x="0" y="0" width="21.5" height="21.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_10" result="shape"/>
</filter>
<filter id="filter2_d_0_10" x="9" y="9" width="15.3087" height="15.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

src/sw/assets/home-menu/setting-save.svg
+42
View File
@@ -0,0 +1,42 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24.3087" height="24.5" viewBox="0 0 24.3087 24.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 2646" filter="url(#filter0_d_0_400)">
<g id="Vector" filter="url(#filter1_d_0_400)">
<path d="M17.5 11V7L14.5 4H5.5C4.6675 4 4 4.675 4 5.5V16C4 16.825 4.6675 17.5 5.5 17.5H11V16H5.5V5.5H13.8775L16 7.6225V11H17.5ZM13 12C13 13.245 11.995 14.25 10.75 14.25C9.505 14.25 8.5 13.245 8.5 12C8.5 10.755 9.505 9.75 10.75 9.75C11.995 9.75 13 10.755 13 12ZM6.25 6.5H13V8.5H6.25V6.5Z" fill="#B6B4AF"/>
</g>
<g id="Subtract" filter="url(#filter2_d_0_400)">
<path d="M20.2403 17.74L19.4378 17.1175C19.4528 16.9975 19.4678 16.8775 19.4678 16.75C19.4678 16.6225 19.4603 16.5025 19.4378 16.3825L20.2328 15.76C20.3003 15.7 20.3228 15.6025 20.2778 15.52L19.5278 14.2225C19.4828 14.14 19.3853 14.11 19.2953 14.14L18.3653 14.515C18.1703 14.365 17.9603 14.2375 17.7278 14.1475L17.5853 13.1575C17.5778 13.0675 17.4953 13 17.4053 13H15.9053C15.8153 13 15.7328 13.0675 15.7178 13.1575L15.5753 14.1475C15.3503 14.245 15.1328 14.365 14.9378 14.515L14.0078 14.14C13.9253 14.11 13.8278 14.14 13.7753 14.2225L13.0253 15.52C12.9803 15.6025 12.9953 15.7 13.0703 15.76L13.8653 16.3825C13.8503 16.5025 13.8428 16.6225 13.8428 16.75C13.8428 16.8775 13.8503 16.9975 13.8653 17.1175L13.0703 17.74C13.0028 17.8 12.9803 17.8975 13.0253 17.98L13.7753 19.2775C13.8203 19.36 13.9178 19.39 14.0078 19.36L14.9378 18.985C15.1328 19.135 15.3428 19.2625 15.5753 19.3525L15.7178 20.3425C15.7328 20.4325 15.8078 20.5 15.9053 20.5H17.4053C17.4953 20.5 17.5778 20.4325 17.5928 20.3425L17.7353 19.3525C17.9603 19.255 18.1778 19.135 18.3653 18.985L19.3028 19.36C19.3853 19.39 19.4828 19.36 19.5353 19.2775L20.2853 17.98C20.3303 17.8975 20.3078 17.8 20.2403 17.74ZM16.6562 17.875C16.0338 17.875 15.5312 17.3725 15.5312 16.75C15.5312 16.1275 16.0338 15.625 16.6562 15.625C17.2787 15.625 17.7812 16.1275 17.7812 16.75C17.7812 17.3725 17.2787 17.875 16.6562 17.875Z" fill-rule="evenodd" clip-rule="evenodd" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_d_0_400" x="3" y="3" width="18.3087" height="18.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_400"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_400" result="shape"/>
</filter>
<filter id="filter1_d_0_400" x="0" y="0" width="21.5" height="21.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_400"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_400" result="shape"/>
</filter>
<filter id="filter2_d_0_400" x="9" y="9" width="15.3087" height="15.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_400"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_400" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

src/sw/assets/home-menu/sw-info-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.5" height="20" viewBox="0 0 21.5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 2405">
<g id="Union" filter="url(#filter0_dd_0_10)">
<path d="M16 4H5.5C4.6675 4 4 4.675 4 5.5V14.5C4 15.325 4.6675 16 5.5 16H13H13.25H16C16.825 16 17.5 15.325 17.5 14.5V5.5C17.5 4.675 16.8325 4 16 4ZM13.25 14.5H13H5.5V7H16V14.5H13.25ZM10 8H11V9H10V8ZM11 10H10V13H11V10Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="21.5" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/sw-info.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.5" height="20" viewBox="0 0 21.5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 2405">
<g id="Union" filter="url(#filter0_dd_0_391)">
<path d="M16 4H5.5C4.6675 4 4 4.675 4 5.5V14.5C4 15.325 4.6675 16 5.5 16H13H13.25H16C16.825 16 17.5 15.325 17.5 14.5V5.5C17.5 4.675 16.8325 4 16 4ZM13.25 14.5H13H5.5V7H16V14.5H13.25ZM10 8H11V9H10V8ZM11 10H10V13H11V10Z" fill-rule="evenodd" clip-rule="evenodd" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_391" x="0" y="0" width="21.5" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_391"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_391" result="effect2_dropShadow_0_391"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_391" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/sw/assets/home-menu/temp-file-hover.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22.25" height="24.5" viewBox="0 0 22.25 24.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="file_copy">
<g id="Vector" filter="url(#filter0_dd_0_10)">
<path d="M14.5 4H5.5C4.675 4 4 4.675 4 5.5V16H5.5V5.5H14.5V4ZM13.75 7H8.5C7.675 7 7.0075 7.675 7.0075 8.5L7 19C7 19.825 7.6675 20.5 8.4925 20.5H16.75C17.575 20.5 18.25 19.825 18.25 19V11.5L13.75 7ZM8.5 19V8.5H13V12.25H16.75V19H8.5Z" fill="#FF5C00"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_10" x="0" y="0" width="22.25" height="24.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_10"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_10" result="effect2_dropShadow_0_10"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_10" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/sw/assets/home-menu/temp-file.svg
+25
View File
@@ -0,0 +1,25 @@
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22.25" height="24.5" viewBox="0 0 22.25 24.5" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="file_copy">
<g id="Vector" filter="url(#filter0_dd_0_408)">
<path d="M14.5 4H5.5C4.675 4 4 4.675 4 5.5V16H5.5V5.5H14.5V4ZM13.75 7H8.5C7.675 7 7.0075 7.675 7.0075 8.5L7 19C7 19.825 7.6675 20.5 8.4925 20.5H16.75C17.575 20.5 18.25 19.825 18.25 19V11.5L13.75 7ZM8.5 19V8.5H13V12.25H16.75V19H8.5Z" fill="#B6B4AF"/>
</g>
</g>
<defs>
<filter id="filter0_dd_0_408" x="0" y="0" width="22.25" height="24.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_408"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_0_408" result="effect2_dropShadow_0_408"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_0_408" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/sw/sw-home-menu-fixture.tsx
+113
View File
@@ -0,0 +1,113 @@
// Storybook fixture for SWHomeMenu: the Figma 26:10591 sample menu (rj6wpsfk24lOWvWiVRAANP).
// Texts, icons and ids are sample data only; the package ships no menu items or icons.
import type { ReactNode } from "react"
import type { SWFileEntry, SWHomeMenuSectionData } from "@hm-design/sw"
import monitorA from "./assets/home-menu/file-open-monitor-a.svg"
import monitorB from "./assets/home-menu/file-open-monitor-b.svg"
import previewImage from "./assets/home-menu/figma-preview-h1100.png"
import save from "./assets/home-menu/save.svg"
import saveHover from "./assets/home-menu/save-hover.svg"
import saveAs from "./assets/home-menu/save-as.svg"
import saveAsHover from "./assets/home-menu/save-as-hover.svg"
import exportIcon from "./assets/home-menu/export.svg"
import exportHover from "./assets/home-menu/export-hover.svg"
import bundle from "./assets/home-menu/bundle.svg"
import bundleHover from "./assets/home-menu/bundle-hover.svg"
import findOpen from "./assets/home-menu/find-open.svg"
import findOpenHover from "./assets/home-menu/find-open-hover.svg"
import recent from "./assets/home-menu/recent.svg"
import recentHover from "./assets/home-menu/recent-hover.svg"
import newFile from "./assets/home-menu/new-file.svg"
import newFileHover from "./assets/home-menu/new-file-hover.svg"
import recover from "./assets/home-menu/recover.svg"
import recoverHover from "./assets/home-menu/recover-hover.svg"
import tempFile from "./assets/home-menu/temp-file.svg"
import tempFileHover from "./assets/home-menu/temp-file-hover.svg"
import display from "./assets/home-menu/display.svg"
import displayHover from "./assets/home-menu/display-hover.svg"
import settingSave from "./assets/home-menu/setting-save.svg"
import settingSaveHover from "./assets/home-menu/setting-save-hover.svg"
import settingLoad from "./assets/home-menu/setting-load.svg"
import settingLoadHover from "./assets/home-menu/setting-load-hover.svg"
import help from "./assets/home-menu/help.svg"
import helpHover from "./assets/home-menu/help-hover.svg"
import inquiry from "./assets/home-menu/inquiry.svg"
import inquiryHover from "./assets/home-menu/inquiry-hover.svg"
import swInfo from "./assets/home-menu/sw-info.svg"
import swInfoHover from "./assets/home-menu/sw-info-hover.svg"
/**
* Figma icon asset (SVG with its own shadow margin). `dx` / `dy` move it from the centered position in the
* 18px slot to its Figma position (measured from each tile's icon frame and asset inset, 2026-10-19).
*/
function figmaIcon(src: string, width: number, height: number, dx = 0, dy = 0) {
return <img src={src} alt="" width={width} height={height} style={dx || dy ? { transform: `translate(${dx}px, ${dy}px)` } : undefined} />
}
function pair(defaultSrc: string, hoverSrc: string, width: number, height: number, dx = 0, dy = 0) {
return { icon: figmaIcon(defaultSrc, width, height, dx, dy), hoverIcon: figmaIcon(hoverSrc, width, height, dx, dy) }
}
/** Figma node of each tile component set, for the 22-node checklist. */
export const figmaTileNodes: Record<string, string> = {
save: "26:11355", "save-as": "26:11371", export: "26:11387", bundle: "26:11403",
"find-open": "26:11416", recent: "26:11450", "new-file": "26:11485",
recover: "26:11507", "temp-file": "26:11529",
display: "26:11542", "setting-save": "26:11558", "setting-load": "26:11586",
help: "26:11599", inquiry: "26:11615", "sw-info": "26:11631",
}
export const figmaTitleNodes: Record<string, string> = {
working: "26:12604", open: "26:12610", damaged: "26:12622", setting: "26:12628 (참고)", help: "26:12616",
}
export const figmaHomeMenuSections: SWHomeMenuSectionData[] = [
{ id: "working", title: "작업중인 파일", items: [
{ id: "save", label: "저장", ...pair(save, saveHover, 21.5, 21.5, -0.25, -0.25) },
{ id: "save-as", label: "복사저장", ...pair(saveAs, saveAsHover, 23.3, 23, 0, 0.5) },
{ id: "export", label: "내보내기", ...pair(exportIcon, exportHover, 22.52, 23.2775, 0, 0.64) },
{ id: "bundle", label: "도면묶기", ...pair(bundle, bundleHover, 23, 22) },
] },
{ id: "open", title: "다른파일 열기", items: [
{ id: "find-open", label: "찾아열기", ...pair(findOpen, findOpenHover, 24.6989, 20, -0.15, -1) },
{ id: "recent", label: "최근파일", ...pair(recent, recentHover, 22, 24.5, 1, 1.25) },
{ id: "new-file", label: "새파일", ...pair(newFile, newFileHover, 20, 23) },
] },
{ id: "damaged", title: "파일 손상시", items: [
{ id: "recover", label: "복구하기", ...pair(recover, recoverHover, 21, 22.3601, 0, -0.5) },
{ id: "temp-file", label: "임시파일", ...pair(tempFile, tempFileHover, 22.25, 24.5, 0.125, 0.25) },
] },
{ id: "setting", title: "My Setting", items: [
{ id: "display", label: "Display...", ...pair(display, displayHover, 24, 22, 1, 2) },
{ id: "setting-save", label: "저장하기", ...pair(settingSave, settingSaveHover, 24.3087, 24.5, 1.15, 1.25) },
{ id: "setting-load", label: "불러오기", ...pair(settingLoad, settingLoadHover, 18, 18, 1, 0) },
] },
{ id: "help", title: "궁금하면", items: [
{ id: "help", label: "설명보기", ...pair(help, helpHover, 18, 18, 1, 0) },
{ id: "inquiry", label: "문의하기", ...pair(inquiry, inquiryHover, 23, 23, 1, 0.5) },
{ id: "sw-info", label: "S/W정보", ...pair(swInfo, swInfoHover, 21.5, 20, 0.75, 0) },
] },
]
export const figmaHomeMenuItemIds = figmaHomeMenuSections.flatMap(section => section.items.map(item => item.id))
// Figma 최근파일 662:67331 sample rows (15) and the 2-depth preview 662:67471 (sample data only).
const recentNames = [
["001-연결종합 계획평면도22222222.dwg", "a"], ["03.암발파공법적용도_231011.grm", "b"], ["1.배수공-일반사항_231004.dwg", "b"],
["00.시공상세도 분석 및 목차_20240416.grm"], ["0_목차.dwg"], ["001-연결종합 계획평면도22222222.dwg"], ["03.암발파공법적용도_231011.grm"],
["001-연결종합 계획평면도22222222.dwg"], ["03.암발파공법적용도_231011.grm"], ["0_목차.dwg"], ["00.시공상세도 분석 및 목차_20240416.grm"],
["001-연결종합 계획평면도22222222.dwg"], ["03.암발파공법적용도_231011.grm"], ["0_목차.dwg"], ["00.시공상세도 분석 및 목차_20240416.grm"],
] as const
const monitor = { a: monitorA, b: monitorB }
export const figmaRecentFiles: SWFileEntry[] = recentNames.map(([name, badge], index) => ({
id: `recent-${index + 1}`,
name,
path: index < 2 ? "Z:\\01.기술개발센터\\04_그리미시스템\\Design..." : "Z:\\01.기술개발센터\\04_그리미시스템\\D...",
badge: badge ? <img src={monitor[badge]} alt="" width={37} height={32} style={{ transform: "translateY(-2px)" }} /> : undefined,
// Figma image 918 crop inside the 310 x 244 frame.
preview: <img src={previewImage} alt="" style={{ position: "absolute", left: "-25.97%", top: "-52.46%", width: "158.67%", height: "191.87%", maxWidth: "none", objectFit: "fill" }} />,
previewTitle: "C:/Users/user/Desktop/H1100.DWG",
}))
/** The Figma menu with the optional 최근파일 sub panel attached to the 최근파일 tile. */
export function withRecentFiles(sections: readonly SWHomeMenuSectionData[], panel: ReactNode): SWHomeMenuSectionData[] {
return sections.map(section => ({ ...section, items: section.items.map(item => item.id === "recent" ? { ...item, panel, panelLabel: "최근파일" } : item) }))
}
src/sw/sw-home-menu.css
+14
View File
@@ -0,0 +1,14 @@
/* Storybook layout only for SW / Home Menu (frames, logs, fixtures). The menu itself uses no story class. */
.sw-home-menu-story__scroll { overflow-x: auto; }
.sw-home-menu-story__frame { position: relative; min-height: 80px; }
.sw-home-menu-story__overlay { position: absolute; top: 0; z-index: 3; }
.sw-home-menu-story__figma { display: block; max-width: none; }
.sw-home-menu-story__stage { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; background: #060606; }
.sw-home-menu-story__single { display: flex; height: 46px; }
.sw-home-menu-story__toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sw-home-menu-story__toolbar > button { padding: 4px 8px; border: 1px solid #999; border-radius: 4px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.sw-home-menu-story__log { margin: 12px 0 0; padding-left: 20px; font-family: monospace; font-size: 12px; }
.sw-home-menu-story__table { border-collapse: collapse; font-size: 13px; }
.sw-home-menu-story__table :is(th, td) { padding: 4px 8px; border: 1px solid #ccc; text-align: left; }
.sw-home-menu-story__tall .sw-home-menu-story__frame { height: 860px; }
.sw-home-menu-story__figma-row { display: flex; align-items: flex-start; gap: 16px; margin-top: 12px; }
src/sw/sw-home-menu.stories.tsx
+342
View File
@@ -0,0 +1,342 @@
import { useState, type ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
// Public API only, like a consuming project.
import {
SWHeader, SWHeaderPropertyBar, SWHomeMenu, SWHomeMenuItem, SWHomeMenuSection, SWPopup, SWPopupRow, SWPopupSection,
SWRecentFiles, SWTheme,
type SWHeaderProperty, type SWHomeMenuAccent, type SWHomeMenuItemData, type SWHomeMenuSectionData, type SWHomeMenuSelectEvent,
} from "@hm-design/sw"
import "@hm-design/sw/styles.css"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import "./sw-home-menu.css"
import {
figmaHomeMenuItemIds, figmaHomeMenuSections, figmaRecentFiles, figmaTileNodes, figmaTitleNodes, withRecentFiles,
} from "./sw-home-menu-fixture"
import placeholderLogo from "./assets/sw-header-logo-placeholder.svg"
import figmaHomeOn from "./assets/home-menu/figma-26-10591.png"
import figmaHomeOnOutline from "./assets/home-menu/figma-662-67267.png"
import figmaRecent from "./assets/home-menu/662-67331_recent-files.png"
import figmaPreview from "./assets/home-menu/662-67471_file-preview-2depth.png"
import figmaPropertyBar from "./assets/home-menu/figma-26-10492.png"
// Owner: docs/sw/figma-additional/analysis-report.md (Figma rj6wpsfk24lOWvWiVRAANP 26:10591 / 662:67267).
const KICKER = "HM DESIGN SYSTEM / SW"
const meta = {
title: "SW/Home Menu",
parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>
const headerArgs = {
logoSrc: placeholderLogo,
logoAlt: "임시 로고",
documentTitle: "C0020101-006-평면및종단면도(06)",
drawingModeLabel: "그리기모드",
layer: { name: "0_Layer_Cludmark" },
color: { value: "255,229,0", swatch: "#ffe500" },
lineStyle: { name: "Continuous", weight: "0.25", scale: "1.00" },
textStyle: { font: "Arial", name: "Standard" },
dimensionStyle: { name: "Standard" },
}
const documents = [{ id: "doc-1", name: "C0020101-006-평면및종단면도(06)" }, { id: "doc-2", name: "C0020101-007-횡단면도" }]
function useLog() {
const [entries, setEntries] = useState<string[]>([])
return { entries, record: (entry: string) => setEntries(list => [entry, ...list].slice(0, 8)) }
}
function Log({ entries }: { entries: string[] }) {
return <ol className="sw-home-menu-story__log" aria-label="이벤트 기록">{entries.length ? entries.map((entry, index) => <li key={index}>{entry}</li>) : <li>이벤트 없음</li>}</ol>
}
const describe = (event: SWHomeMenuSelectEvent) => `onItemSelect(${event.section?.id ?? "-"} / ${event.item.id}, active=${event.active})`
/**
* SWHeader `homeMenu`: the logo toggles the menu (no onHomeClick), SWHeader places it from the measured header
* (object area − 2px to the window area; Figma x 375 → 1680 at 1920). New / Open stay in the document dropdown.
*/
function HeaderWithMenu({ width, defaultOpen = false, defaultActiveIds = [], accent, recent = true, children }: {
width?: number; defaultOpen?: boolean; defaultActiveIds?: string[]; accent?: SWHomeMenuAccent; recent?: boolean
children?: (log: ReactNode) => ReactNode
}) {
const [open, setOpen] = useState(defaultOpen)
const [activeIds, setActiveIds] = useState<string[]>(defaultActiveIds)
const { entries, record } = useLog()
const [sections] = useState(() => recent
? withRecentFiles(figmaHomeMenuSections, <SWRecentFiles files={figmaRecentFiles} onFileOpen={file => record(`onFileOpen(${file.id})`)} />)
: figmaHomeMenuSections)
return (
<>
<div className="sw-home-menu-story__frame" style={width ? { width } : undefined}>
<SWHeader {...headerArgs} documents={documents} activeDocumentId="doc-1"
onDocumentNew={() => record("onDocumentNew")} onDocumentOpen={() => record("onDocumentOpen")}
onHomeClick={() => record("onHomeClick (homeMenu 사용 중에는 호출되지 않음)")}
homeMenuOpen={open} onHomeMenuOpenChange={(next, reason) => { setOpen(next); record(`onHomeMenuOpenChange(${next}, ${reason})`) }}
homeMenu={{
sections, accent, activeIds,
onActiveChange: next => { setActiveIds(next); record(`onActiveChange([${next.join(", ")}])`) },
onItemSelect: event => record(describe(event)),
}} />
</div>
{children?.(<Log entries={entries} />)}
</>
)
}
export const FigmaHomeOn: Story = {
name: "Figma 재현 (26:10591)",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="로고 클릭 메뉴 — Figma 26:10591 재현"
description="1920px Header 위에 SWHomeMenu를 겹친 상태입니다. 위는 구현, 아래는 Figma 스크린샷(1x)입니다. 로고를 다시 누르면 닫힙니다." />
<StorySection title="구현 (1920px)" description="SWHeader가 객체 수정 영역 시작(−2px)~창 영역 시작을 DOM에서 측정해 메뉴를 놓습니다. Figma 열림 상태의 Header #5F4B0F 상·하단 선은 별도 승인 전까지 적용하지 않습니다.">
<div className="sw-home-menu-story__scroll"><HeaderWithMenu width={1920} defaultOpen /></div>
</StorySection>
<StorySection title="Figma 26:10591">
<div className="sw-home-menu-story__scroll"><img className="sw-home-menu-story__figma" src={figmaHomeOn} alt="Figma 26:10591 home on" width={1920} height={78} /></div>
</StorySection>
</StoryPage>
),
}
/** 1:1 capture canvas for pixel comparison with the Figma 1920 x 77 frame (no story page chrome). */
function FigmaCanvas({ active, accent, recent }: { active?: boolean; accent?: SWHomeMenuAccent; recent?: boolean }) {
const sections = recent ? withRecentFiles(figmaHomeMenuSections, <SWRecentFiles files={figmaRecentFiles} />) : figmaHomeMenuSections
return (
<div className="sw-home-menu-story__frame" style={{ width: 1920, height: recent ? 840 : 80 }}>
{/* The integrated placement (measured by SWHeader), not a fixed x: it must land on Figma x 375. */}
<SWHeader {...headerArgs} defaultHomeMenuOpen homeMenu={{ sections, accent, autoFocus: false,
activeIds: active ? figmaHomeMenuItemIds : recent ? ["recent"] : undefined }} />
</div>
)
}
export const CaptureDefault: Story = { name: "비교 캔버스 · Default", tags: ["!autodocs"], render: () => <FigmaCanvas /> }
export const CaptureActive: Story = { name: "비교 캔버스 · Variant3", tags: ["!autodocs"], render: () => <FigmaCanvas active /> }
export const CaptureOutline: Story = { name: "비교 캔버스 · outline", tags: ["!autodocs"], render: () => <FigmaCanvas accent="outline" /> }
export const CaptureRecent: Story = { name: "비교 캔버스 · 최근파일", tags: ["!autodocs"], render: () => <FigmaCanvas recent /> }
export const HeaderComposition: Story = {
name: "Header 조합 · 로고 클릭",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SWHeader homeMenu"
description="SWHeader의 homeMenu 하나로 연결합니다. 로고 클릭 = 열기/닫기(onHomeClick은 호출하지 않음), 메뉴 빈 곳 클릭 = 닫기(Figma CLOSE), 타일 클릭 = Active 전환, 다시 클릭 = 기본. Escape는 하위 패널 → 메뉴 순으로 닫고 로고로 Focus를 돌립니다. ←/→/Home/End로 타일을 이동합니다. New / Open은 문서 Dropdown 안에 그대로 있고, Dropdown을 열면 메뉴가 닫힙니다." />
<StorySection title="현재 폭">
<HeaderWithMenu>{log => log}</HeaderWithMenu>
</StorySection>
</StoryPage>
),
}
export const Variants: Story = {
name: "3가지 Variant",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="Default / Variant2 / Variant3"
description="Figma 버튼 세트 15개(26:11355 … 26:11631)는 모두 같은 SWHomeMenuItem입니다. Variant2(Hover)는 마우스를 올려 확인하며, Figma에서 Variant3와 시각 속성이 같습니다. Variant3는 activeIds로 지정합니다." />
<StorySection title="Default">
<SWTheme className="sw-home-menu-story__stage"><SWHomeMenu defaultOpen sections={figmaHomeMenuSections} closeOnBackgroundClick={false} aria-label="Default" /></SWTheme>
</StorySection>
<StorySection title="Variant2 · Hover" description="마우스를 올린 타일만 Variant2입니다. 클릭하면 Variant3, 다시 클릭하면 Default입니다.">
<SWTheme className="sw-home-menu-story__stage"><SWHomeMenu defaultOpen sections={figmaHomeMenuSections} closeOnBackgroundClick={false} aria-label="Hover" /></SWTheme>
</StorySection>
<StorySection title="Variant3 · Active (activeIds = 15개 전체)">
<SWTheme className="sw-home-menu-story__stage"><SWHomeMenu defaultOpen sections={figmaHomeMenuSections} activeIds={figmaHomeMenuItemIds} closeOnBackgroundClick={false} aria-label="Active" /></SWTheme>
</StorySection>
<StorySection title="Figma 노드 대응" description="섹션 제목 tit_* 와 타일 세트">
<table className="sw-home-menu-story__table">
<thead><tr><th>섹션</th><th>제목 노드</th><th>타일 (노드)</th></tr></thead>
<tbody>{figmaHomeMenuSections.map(section => (
<tr key={section.id}><td>{section.title}</td><td>{figmaTitleNodes[section.id]}</td>
<td>{section.items.map(item => `${item.label} (${figmaTileNodes[item.id]})`).join(" · ")}</td></tr>
))}</tbody>
</table>
</StorySection>
</StoryPage>
),
}
function DynamicDemo() {
const [sections, setSections] = useState<SWHomeMenuSectionData[]>(figmaHomeMenuSections)
const [selection, setSelection] = useState<"multiple" | "single">("multiple")
const [accent, setAccent] = useState<SWHomeMenuAccent>("auto")
const [activeIds, setActiveIds] = useState<string[]>(["save"])
const [count, setCount] = useState(1)
const { entries, record } = useLog()
const update = (sectionId: string, change: (items: readonly SWHomeMenuItemData[]) => SWHomeMenuItemData[]) =>
setSections(list => list.map(section => section.id === sectionId ? { ...section, items: change(section.items) } : section))
const toggleItem = (id: string, key: "hidden" | "disabled") => setSections(list => list.map(section => ({
...section, items: section.items.map(item => item.id === id ? { ...item, [key]: !item[key] } : item),
})))
const mono = <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="currentColor" d="M3 3h12v12H3z M5 5v8h8V5z" /></svg>
return (
<>
<div className="sw-home-menu-story__toolbar" role="toolbar" aria-label="데이터 변경">
<button type="button" onClick={() => { update("help", items => [...items, { id: `custom-${count}`, label: `새 메뉴 ${count}`, icon: mono }]); setCount(count + 1) }}>궁금하면에 항목 추가(currentColor 아이콘)</button>
<button type="button" onClick={() => update("help", items => items.slice(0, -1))}>궁금하면 마지막 항목 삭제</button>
<button type="button" onClick={() => toggleItem("export", "hidden")}>내보내기 숨김 전환</button>
<button type="button" onClick={() => toggleItem("recover", "disabled")}>복구하기 disabled 전환</button>
<button type="button" onClick={() => update("damaged", items => items.map(item => item.id === "temp-file" ? { ...item, label: item.label === "임시파일" ? "임시파일 자동 저장 목록" : "임시파일" } : item))}>긴 라벨 전환</button>
<button type="button" onClick={() => setSections(list => list.some(section => section.id === "extra") ? list.filter(section => section.id !== "extra")
: [...list, { id: "extra", title: "새 섹션", items: [{ id: "extra-a", label: "도구 A", icon: mono }] }])}>섹션 추가/삭제</button>
<button type="button" onClick={() => setSelection(selection === "multiple" ? "single" : "multiple")}>selection: {selection}</button>
<button type="button" onClick={() => setAccent(accent === "auto" ? "sections" : accent === "sections" ? "outline" : "auto")}>accent: {accent}</button>
<button type="button" onClick={() => setActiveIds([])}>Active 모두 해제</button>
</div>
<SWTheme className="sw-home-menu-story__stage">
<SWHomeMenu defaultOpen sections={sections} selection={selection} accent={accent} closeOnBackgroundClick={false}
activeIds={activeIds} onActiveChange={next => { setActiveIds(next); record(`onActiveChange([${next.join(", ")}])`) }}
onItemSelect={event => record(describe(event))} />
</SWTheme>
<Log entries={entries} />
</>
)
}
export const DynamicData: Story = {
name: "Props · 데이터 변경",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="데이터 기반 항목 · 선택 상태 제어"
description="항목·섹션 추가/삭제/숨김, disabled, 긴 라벨, selection, accent를 외부 데이터로 바꿉니다. 폭·구분선·모서리는 항목 수에서 자동으로 계산됩니다." />
<StorySection title="sections + activeIds (Controlled)"><DynamicDemo /></StorySection>
</StoryPage>
),
}
function StandaloneDemo() {
const [active, setActive] = useState(false)
const { entries, record } = useLog()
const mono = <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" strokeWidth="2" /></svg>
return (
<>
<SWTheme className="sw-home-menu-story__stage">
<SWHomeMenu defaultOpen aria-label="조합형 메뉴" defaultActiveIds={["b"]} closeOnBackgroundClick={false} onItemSelect={event => record(describe(event))}>
<SWHomeMenuSection title="조합형 섹션">
<SWHomeMenuItem itemId="a" label="도구 A" icon={mono} />
<SWHomeMenuItem itemId="b" label="도구 B" icon={mono} />
<SWHomeMenuItem itemId="c" label="실행" icon={mono} toggle={false} />
</SWHomeMenuSection>
</SWHomeMenu>
</SWTheme>
<SWTheme className="sw-home-menu-story__stage">
<div className="sw-home-menu-story__single">
<SWHomeMenuItem label="단독 타일" icon={mono} active={active} onActiveChange={next => { setActive(next); record(`onActiveChange(${next})`) }} />
</div>
</SWTheme>
<Log entries={entries} />
</>
)
}
export const Standalone: Story = {
name: "단독 사용 · 조합형",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SWTheme 안에서 단독 사용"
description="Header 없이 <SWTheme>만으로 렌더링합니다. children(SWHomeMenuSection / SWHomeMenuItem) 조합형과 메뉴 밖 단독 SWHomeMenuItem(active / onActiveChange)을 보여 줍니다." />
<StorySection title="children 조합 · 단독 타일"><StandaloneDemo /></StorySection>
</StoryPage>
),
}
export const RecentFilesPanel: Story = {
name: "최근파일 하위 패널 (662:67267)",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="최근파일 — Figma 662:67267 + 662:67331 + 662:67471"
description="Figma 주석 '최근파일' 상태입니다. 최근파일 타일을 누르면(Variant3) 메뉴 하단 강조가 전체 2px 외곽선으로 바뀌고 그 아래에 최근파일 목록이 열립니다. 행에 마우스를 올리면 2뎁스 미리보기가 옆에 나타납니다. 다시 누르거나 Escape로 닫습니다. 목록과 미리보기 이미지는 Story 데이터입니다. K 미리보기(Variant5)는 기존 SWHeader K 가이드 Hover가 담당합니다." />
<StorySection title="구현 (1920px)">
<div className="sw-home-menu-story__scroll sw-home-menu-story__tall"><HeaderWithMenu width={1920} defaultOpen defaultActiveIds={["recent"]}>{log => log}</HeaderWithMenu></div>
</StorySection>
<StorySection title="Figma 662:67267 · 662:67331 · 662:67471">
<div className="sw-home-menu-story__scroll"><img className="sw-home-menu-story__figma" src={figmaHomeOnOutline} alt="Figma 662:67267" width={1935} height={193} /></div>
<div className="sw-home-menu-story__figma-row">
<img src={figmaRecent} alt="Figma 662:67331 최근파일" width={362} height={758} />
<img src={figmaPreview} alt="Figma 662:67471 파일출력 2뎁스" width={315} height={276} />
</div>
</StorySection>
</StoryPage>
),
}
// Property bar check (Figma 26:10492) against the current SWHeaderPropertyBar. Values are the Figma sample; the
// bar itself is unchanged (3 differences, awaiting approval: home-menu-integration report §속성Bar).
const barProperties: SWHeaderProperty[] = [
{ id: "radius", name: "반지름", value: "4.0526", type: "number", groupId: "bar" },
{ id: "diameter", name: "지름", value: "8.1052", type: "number", groupId: "bar" },
{ id: "circumference", name: "원주", value: "8.1052", type: "number", groupId: "bar" },
{ id: "area", name: "면적", value: "51.5962", type: "number", groupId: "bar" },
]
function PropertyBarCompare() {
const [values, setValues] = useState(barProperties)
return (
<SWTheme className="sw-home-menu-story__stage" style={{ display: "block" }}>
<SWHeaderPropertyBar selection={{ id: "circle", title: "원", kind: "single" }} properties={values}
onPropertyChange={(property, value) => setValues(list => list.map(item => item.id === property.id ? { ...item, value } : item))} />
</SWTheme>
)
}
export const PropertyBarCheck: Story = {
name: "속성Bar 비교 (26:10492)",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="속성Bar — Figma 26:10492 비교"
description="현재 SWHeaderPropertyBar(수정 없음)에 Figma 예시 값을 넣었습니다. 입력에 마우스를 올리면 hover, 클릭하면 on(편집) 상태입니다." />
<StorySection title="현재 구현"><PropertyBarCompare /></StorySection>
<StorySection title="Figma 26:10492 (1222 x 28)">
<div className="sw-home-menu-story__scroll"><img className="sw-home-menu-story__figma" src={figmaPropertyBar} alt="Figma 26:10492" width={1222} height={28} /></div>
</StorySection>
</StoryPage>
),
}
export const CapturePropertyBar: Story = {
name: "비교 캔버스 · 속성Bar", tags: ["!autodocs"],
render: () => <SWTheme style={{ background: "#060606", width: 1222, padding: 0 }}><SWHeaderPropertyBar selection={{ id: "circle", title: "원", kind: "single" }} properties={barProperties} onPropertyChange={() => {}} /></SWTheme>,
}
/** Integration: logo menu + property window + SWPopup at the same time (Escape stack and focus). */
function IntegrationDemo() {
const [open, setOpen] = useState(false)
const [panelOpen, setPanelOpen] = useState(false)
const [popupOpen, setPopupOpen] = useState(false)
const { entries, record } = useLog()
const [sections] = useState(() => withRecentFiles(figmaHomeMenuSections, <SWRecentFiles files={figmaRecentFiles} onFileOpen={file => record(`onFileOpen(${file.id})`)} />))
return (
<>
<div className="sw-home-menu-story__toolbar" role="toolbar" aria-label="열기">
<button type="button" data-testid="open-popup" onClick={() => setPopupOpen(true)}>SWPopup 열기</button>
</div>
<div className="sw-home-menu-story__frame sw-home-menu-story__tall">
<SWHeader {...headerArgs} documents={documents} activeDocumentId="doc-1"
onDocumentNew={() => record("onDocumentNew")} onDocumentOpen={() => record("onDocumentOpen")}
homeMenuOpen={open} onHomeMenuOpenChange={(next, reason) => { setOpen(next); record(`onHomeMenuOpenChange(${next}, ${reason})`) }}
homeMenu={{ sections, onItemSelect: event => record(describe(event)) }}
propertyPanelOpen={panelOpen} onPropertyPanelOpenChange={next => { setPanelOpen(next); record(`onPropertyPanelOpenChange(${next})`) }}
propertyPanel={{ selection: { id: "none", title: "선택된 객체 없음", kind: "none" } }} />
{popupOpen && (
<SWTheme style={{ position: "absolute", top: 120, right: 24 }}>
<SWPopup title="사용자 Popup" onClose={() => { setPopupOpen(false); record("SWPopup onClose") }}>
<SWPopupSection title="내용"><SWPopupRow label="항목">값</SWPopupRow></SWPopupSection>
</SWPopup>
</SWTheme>
)}
</div>
<Log entries={entries} />
</>
)
}
export const Integration: Story = {
name: "통합 · Popup · Escape",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="로고 메뉴 + 속성창 + SWPopup"
description="Escape는 Focus가 있는 곳을 먼저 닫습니다(메뉴 안: 하위 패널 → 메뉴, Popup 안: 그 Popup). Focus가 모두의 밖이면 가장 최근에 열거나 사용한 하나만 닫습니다." />
<StorySection title="현재 폭"><IntegrationDemo /></StorySection>
</StoryPage>
),
}
/** Responsive check: the header at the viewport width with the menu open (no story page chrome). */
export const CaptureResponsive: Story = { name: "비교 캔버스 · 반응형", tags: ["!autodocs"], render: () => <HeaderWithMenu defaultOpen /> }