plusui-native 0.2.45 → 0.2.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plusui-native",
-  "version": "0.2.45",
+  "version": "0.2.48",
   "description": "PlusUI CLI - Build C++ desktop apps modern UI ",
   "main": "src/index.js",
   "type": "module",
@@ -27,11 +27,11 @@
     "semver": "^7.6.0",
     "which": "^4.0.0",
     "execa": "^8.0.1",
-    "plusui-native-builder": "^0.1.44",
-    "plusui-native-bindgen": "^0.1.44"
+    "plusui-native-builder": "^0.1.47",
+    "plusui-native-bindgen": "^0.1.47"
   },
   "peerDependencies": {
-    "plusui-native-bindgen": "^0.1.44"
+    "plusui-native-bindgen": "^0.1.47"
   },
   "publishConfig": {
     "access": "public"

package/templates/react/frontend/src/App.tsx

@@ -19,6 +19,7 @@ function App() {
   const [files, setFiles] = useState<FileInfo[]>([]);
   const [isDragging, setIsDragging] = useState(false);
   const [dropZoneStyle, setDropZoneStyle] = useState('');
+  const [dropAccent] = useState('#60a5fa');
 
   useEffect(() => {
     win.show().catch(() => {
@@ -157,19 +158,12 @@ function App() {
             to prevent files from opening in the browser, allowing your FileDrop handlers to work.
           </p>
           
-          <div style={{ marginBottom: '1rem' }}>
-            <label style={{ marginRight: '0.5rem', fontSize: '0.9em' }}>Style:</label>
+          <div className="filedrop-control-row">
+            <label className="filedrop-control-label">Style:</label>
             <select 
               value={dropZoneStyle} 
               onChange={(e) => setDropZoneStyle(e.target.value)}
-              style={{ 
-                padding: '0.5rem', 
-                borderRadius: '0.25rem', 
-                border: '1px solid rgba(255,255,255,0.3)',
-                background: 'rgba(255,255,255,0.1)',
-                color: '#fff',
-                fontSize: '0.9em'
-              }}
+              className="filedrop-control-select"
             >
               <option value="">Default</option>
               <option value="filedrop-compact">Compact</option>
@@ -179,7 +173,13 @@ function App() {
             </select>
           </div>
 
-          <div className={`filedrop-zone ${dropZoneStyle} ${isDragging ? 'filedrop-active' : ''}`}>
+          <div
+            className={`filedrop-zone ${dropZoneStyle} ${isDragging ? 'filedrop-active' : ''}`}
+            data-dropzone="true"
+            data-filedrop-state={isDragging ? 'dragging' : 'idle'}
+            data-filedrop-style={dropZoneStyle.replace('filedrop-', '') || 'default'}
+            style={{ '--filedrop-accent': dropAccent } as React.CSSProperties}
+          >
             <div className="filedrop-content">
               <svg className="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 

package/templates/react/frontend/src/main.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './styles/app.css';
+import 'plusui-native-core/Core/Features/FileDrop/filedrop.css';
+import './styles/filedrop.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

package/templates/react/frontend/src/styles/filedrop.css

@@ -0,0 +1,60 @@
+.filedrop-control-row {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filedrop-control-label {
+  font-size: 0.9em;
+}
+
+.filedrop-control-select {
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 0.9em;
+}
+
+.filedrop-zone,
+.dropzone,
+[data-dropzone='true'] {
+  --filedrop-accent: #3b82f6;
+}
+
+[data-dropzone='true'][data-filedrop-state='dragging'] {
+  border-color: var(--filedrop-accent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--filedrop-accent) 20%, transparent);
+}
+
+[data-dropzone='true'][data-filedrop-style='compact'] {
+  min-height: 120px;
+  padding: 1.5rem;
+}
+
+[data-dropzone='true'][data-filedrop-style='inline'] {
+  min-height: 80px;
+  padding: 1rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+[data-dropzone='true'][data-filedrop-style='inline'] .filedrop-content {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: 0.75rem;
+}
+
+[data-dropzone='true'][data-filedrop-style='minimal'] {
+  border-style: solid;
+  border-width: 1px;
+}
+
+[data-dropzone='true'][data-filedrop-style='bold'] {
+  border-width: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}

package/templates/solid/frontend/src/App.tsx

@@ -19,6 +19,7 @@ function App() {
   const [files, setFiles] = createSignal<FileInfo[]>([]);
   const [isDragging, setIsDragging] = createSignal(false);
   const [dropZoneStyle, setDropZoneStyle] = createSignal('');
+  const [dropAccent] = createSignal('#60a5fa');
 
   onMount(() => {
     // Setup routes
@@ -152,19 +153,12 @@ function App() {
             to prevent files from opening in the browser, allowing your FileDrop handlers to work.
           </p>
           
-          <div style={{ 'margin-bottom': '1rem' }}>
-            <label style={{ 'margin-right': '0.5rem', 'font-size': '0.9em' }}>Style:</label>
+          <div class="filedrop-control-row">
+            <label class="filedrop-control-label">Style:</label>
             <select 
               value={dropZoneStyle()} 
               onChange={(e) => setDropZoneStyle(e.target.value)}
-              style={{ 
-                padding: '0.5rem', 
-                'border-radius': '0.25rem', 
-                border: '1px solid rgba(255,255,255,0.3)',
-                background: 'rgba(255,255,255,0.1)',
-                color: '#fff',
-                'font-size': '0.9em'
-              }}
+              class="filedrop-control-select"
             >
               <option value="">Default</option>
               <option value="filedrop-compact">Compact</option>
@@ -174,7 +168,13 @@ function App() {
             </select>
           </div>
 
-          <div class={`filedrop-zone ${dropZoneStyle()} ${isDragging() ? 'filedrop-active' : ''}`}>
+          <div
+            class={`filedrop-zone ${dropZoneStyle()} ${isDragging() ? 'filedrop-active' : ''}`}
+            data-dropzone="true"
+            data-filedrop-state={isDragging() ? 'dragging' : 'idle'}
+            data-filedrop-style={dropZoneStyle().replace('filedrop-', '') || 'default'}
+            style={{ '--filedrop-accent': dropAccent() }}
+          >
             <div class="filedrop-content">
               <svg class="filedrop-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} 

package/templates/solid/frontend/src/main.tsx

@@ -1,5 +1,7 @@
 import { render } from 'solid-js/web';
 import App from './App';
 import './styles/app.css';
+import 'plusui-native-core/Core/Features/FileDrop/filedrop.css';
+import './styles/filedrop.css';
 
 render(() => <App />, document.getElementById('root')!);

package/templates/solid/frontend/src/styles/filedrop.css

@@ -0,0 +1,60 @@
+.filedrop-control-row {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filedrop-control-label {
+  font-size: 0.9em;
+}
+
+.filedrop-control-select {
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 0.9em;
+}
+
+.filedrop-zone,
+.dropzone,
+[data-dropzone='true'] {
+  --filedrop-accent: #3b82f6;
+}
+
+[data-dropzone='true'][data-filedrop-state='dragging'] {
+  border-color: var(--filedrop-accent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--filedrop-accent) 20%, transparent);
+}
+
+[data-dropzone='true'][data-filedrop-style='compact'] {
+  min-height: 120px;
+  padding: 1.5rem;
+}
+
+[data-dropzone='true'][data-filedrop-style='inline'] {
+  min-height: 80px;
+  padding: 1rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+[data-dropzone='true'][data-filedrop-style='inline'] .filedrop-content {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: 0.75rem;
+}
+
+[data-dropzone='true'][data-filedrop-style='minimal'] {
+  border-style: solid;
+  border-width: 1px;
+}
+
+[data-dropzone='true'][data-filedrop-style='bold'] {
+  border-width: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}