devnonla-ui 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devnonla-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "NonlaUI — React controls for Nonla Agents",
   "author": "devlangla <devlangla0x01@gmail.com>",

package/src/desktop/DesktopIcon.tsx

@@ -2,12 +2,10 @@ import { forwardRef, type ReactNode } from "react";
 import { FluentIcon } from "../icon/FluentIcon";
 
 const iconButtonClass =
-  "group w-[96px] flex flex-col items-center gap-2 py-2 px-0 rounded-md border-none cursor-pointer select-none outline-none bg-transparent focus-visible:outline-2 focus-visible:outline-brand motion-safe:transition-transform motion-safe:hover:-translate-y-0.5 motion-safe:active:scale-[0.98]";
+  "group w-[96px] flex flex-col items-center gap-0.5 py-2 px-0 rounded-md border-none cursor-pointer select-none outline-none bg-transparent focus-visible:outline-2 focus-visible:outline-brand motion-safe:transition-transform motion-safe:hover:-translate-y-0.5 motion-safe:active:scale-[0.98]";
 
 const labelClass = "text-xs leading-[18px] font-semibold text-center line-clamp-2 w-full";
 
-const plateClass = "nonla-window-glass nonla-desktop-icon-plate w-11 h-11 flex items-center justify-center";
-
 export const DesktopIcon = forwardRef<
   HTMLButtonElement,
   {
@@ -21,11 +19,7 @@ export const DesktopIcon = forwardRef<
 >(function DesktopIcon({ label, icon, media, active = false, onCard = false, onClick }, ref) {
   return (
     <button ref={ref} type="button" title={label} aria-label={label} aria-current={active ? "true" : undefined} dir="ltr" onClick={onClick} className={iconButtonClass}>
-      {media ?? (
-        <span className={plateClass}>
-          <FluentIcon name={icon ?? "sparkle-24"} size={32} />
-        </span>
-      )}
+      {media ?? <FluentIcon name={icon ?? "sparkle-24"} size={32} />}
       <span className={`${labelClass} ${onCard ? "text-foreground" : "text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.85)]"}`}>{label}</span>
     </button>
   );

package/src/desktop/MeadowDesktop.tsx

@@ -6,7 +6,7 @@ export function MeadowDesktop({ children, src }: { children?: ReactNode; src?: s
     <div className="absolute inset-0 bg-meadow">
       <MeadowWallpaper src={src} />
       <div className="nonla-desktop-layer absolute inset-x-0 bottom-0 top-desktop-bar">
-        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto pl-2 pr-3 pt-2 pb-3">
+        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto pl-0 pr-3 pt-3 pb-3">
           <div className="flex h-full flex-col flex-wrap content-start gap-x-2 gap-y-3">{children}</div>
         </nav>
       </div>

package/src/styles.css

@@ -633,14 +633,6 @@
   backdrop-filter: blur(40px) saturate(108%);
 }
 
-/* Fluent Color desktop tile — same frost as the window, macOS squircle. */
-.nonla-desktop-icon-plate {
-  overflow: hidden;
-  border: 0;
-  border-radius: 22%;
-  box-shadow: none;
-}
-
 .nonla-btn-glass {
   border-color: var(--glass-border);
   background: var(--glass);