Add web development scripts to package.json for improved workflow

apps/dashboard/src/components/layout/Sidebar.astro

@@ -10,10 +10,10 @@ const items = [
 ---
 
 <aside
-  class="fixed top-0 left-0 z-30 flex h-screen w-[96px] flex-col items-center border-r border-[var(--color-border-soft)] bg-[var(--color-surface)] py-5"
+  class="fixed top-0 left-0 z-30 flex h-screen w-[72px] flex-col items-center border-r border-[var(--color-border-soft)] bg-[var(--color-surface)] py-5"
 >
-  <a href="/" class="mb-6 flex h-10 w-10 items-center justify-center" aria-label="Alfsight home">
-    <svg viewBox="0 0 32 32" class="h-6 w-6 text-[var(--color-primary)]" aria-hidden="true">
+  <a href="/" class="mb-6 flex h-8 w-8 items-center justify-center" aria-label="Alfsight home">
+    <svg viewBox="0 0 32 32" class="h-5 w-5 text-[var(--color-primary)]" aria-hidden="true">
       <circle cx="10" cy="16" r="5" fill="currentColor" opacity="0.9"></circle>
       <circle cx="22" cy="10" r="4" fill="currentColor" opacity="0.6"></circle>
       <circle cx="22" cy="22" r="4" fill="currentColor" opacity="0.4"></circle>
@@ -29,14 +29,14 @@ const items = [
           <a
             href={item.href}
             class:list={[
-              "group flex w-[72px] flex-col items-center gap-1.5 rounded-[var(--radius-lg)] px-2 py-3 transition-colors",
+              "group flex w-[56px] flex-col items-center gap-1 rounded-lg px-2 py-2.5 transition-colors",
               active
-                ? "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]"
+                ? "bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-primary-hover)] text-white shadow-[inset_0_4px_3px_-2px_var(--color-primary-glow),0_4px_5px_-3px_rgba(0,0,0,0.3)]"
                 : "text-[var(--color-text-soft)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text)]",
             ]}
           >
-            <Icon size={18} strokeWidth={1.8} />
-            <span class="text-[10.5px] font-medium leading-none tracking-tight">{item.label}</span>
+            <Icon size={17} strokeWidth={1.8} />
+            <span class="text-[10px] font-medium leading-none tracking-tight">{item.label}</span>
           </a>
         );
       })

apps/dashboard/src/components/ui/Button.tsx

@@ -10,16 +10,17 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
   icon?: ReactNode;
   iconRight?: ReactNode;
+  kbd?: string;
 }
 
 const base =
-  "inline-flex items-center justify-center gap-2 font-medium rounded-[var(--radius-pill)] transition-all cursor-pointer disabled:cursor-not-allowed disabled:opacity-55 whitespace-nowrap";
+  "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all cursor-pointer disabled:cursor-not-allowed disabled:opacity-55 whitespace-nowrap border-none";
 
 const variants: Record<Variant, string> = {
   primary:
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] hover:bg-[var(--color-primary-hover)] shadow-[0_1px_0_rgba(255,255,255,0.08)_inset]",
+    "bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-primary-hover)] text-[var(--color-primary-foreground)] shadow-[inset_0_4px_3px_-2px_var(--color-primary-glow),0_4px_5px_-3px_rgba(0,0,0,0.6)] border-b-[2px] border-b-[var(--color-primary-deep)] hover:border-b-[4px] hover:border-b-[var(--color-primary-deep)] hover:-translate-y-px active:shadow-[inset_0_4px_3px_-2px_var(--color-primary-glow),0_4px_5px_-3px_transparent] active:border-b-[1px] active:border-b-[var(--color-primary-deep)] active:translate-y-0",
   secondary:
-    "bg-[var(--color-surface)] text-[var(--color-text)] border border-[var(--color-border)] hover:bg-[var(--color-surface-2)]",
+    "bg-[var(--color-surface)] text-[var(--color-text)] border border-[var(--color-border)] hover:bg-[var(--color-surface-2)] shadow-[var(--shadow-card)]",
   ghost:
     "bg-transparent text-[var(--color-text-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text)]",
   danger:
@@ -38,6 +39,7 @@ export function Button({
   loading,
   icon,
   iconRight,
+  kbd: kbdKey,
   children,
   className,
   disabled,
@@ -55,6 +57,11 @@ export function Button({
         icon
       )}
       {children}
+      {kbdKey && (
+        <kbd className="ml-1 rounded bg-[var(--color-primary-light)] px-2 py-0.5 text-[11px] font-semibold shadow-[inset_0_-3px_3px_-2px_#1f54f0,inset_0_3px_3px_-2px_#658dff,0_2px_2px_-2px_rgba(0,0,0,0.3),0_0_0_2px_#0d47f0]">
+          {kbdKey}
+        </kbd>
+      )}
       {iconRight}
     </button>
   );

apps/dashboard/src/components/widgets/CreateWidget.tsx

@@ -34,7 +34,7 @@ export function CreateWidget() {
         Connect a public Instagram profile. You can customize layout and theme in the editor.
       </p>
 
-      <form onSubmit={submit} className="mt-6 space-y-4 rounded-[8px] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
+      <form onSubmit={submit} className="mt-6 space-y-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
         <Field label="Widget name">
           <TextInput
             required
@@ -59,7 +59,7 @@ export function CreateWidget() {
         </Field>
 
         {error && (
-          <div className="rounded-[6px] bg-[color:color-mix(in_oklab,var(--color-danger)_8%,transparent)] px-3 py-2 text-[13px] text-[var(--color-danger)]">
+          <div className="rounded-lg bg-[color:color-mix(in_oklab,var(--color-danger)_8%,transparent)] px-3 py-2 text-[13px] text-[var(--color-danger)]">
             {error}
           </div>
         )}