@ramme-io/create-app 1.1.7 → 1.1.8

package/template/src/core/manifest-types.ts

@@ -1,40 +1,51 @@
+// src/core/manifest-types.ts
+
 /**
- * @file manifest-types.ts
- * @repository ramme-app-starter
- * @description Defines the canonical types for "link" entries used in
- * the global app.manifest.ts. These are distinct from SitemapEntry
- * as they do not require a `component` and are used for shared
- * navigation elements like user menus, settings, or footers.
+ * The fundamental unit of the UI.
+ * Corresponds to a specific React component in the registry.
  */
-import { type IconName } from '@ramme-io/ui';
+export interface Block {
+  id: string;
+  type: string; // e.g., 'DeviceCard', 'StatCard', 'LineChart'
+  props: Record<string, any>; // Static props (title, default values)
+  layout?: {
+    colSpan?: number;
+    rowSpan?: number;
+  };
+}
 
-export interface ManifestLink {
-  /**
-   * A unique string identifier.
-   * e.g., 'user.profile'
-   */
+/**
+ * A horizontal container that groups blocks together.
+ * Maps to a CSS Grid or Flex container.
+ */
+export interface PageSection {
   id: string;
-  
-  /**
-   * The URL path for the link.
-   * e.g., '/profile', '/settings/billing'
-   */
-  path: string;
-  
-  /**
-   * The human-readable name for the link.
-   * e.g., 'Your Profile', 'Billing'
-   */
+  title?: string;
+  description?: string;
+  layout?: {
+    columns?: number; // e.g., 3 (for a 3-column grid)
+    variant?: 'grid' | 'stack';
+  };
+  blocks: Block[];
+}
+
+/**
+ * A top-level page in the application.
+ */
+export interface PageDefinition {
+  id: string;
+  slug: string;
   title: string;
-  
-  /**
-   * (Optional) The name of the icon from @ramme-io/ui.
-   * e.g., 'user', 'settings'
-   */
-  icon?: IconName;
-  
-  /**
-   * (Optional) An array of nested links for creating sub-menus.
-   */
-  children?: ManifestLink[];
+  description?: string;
+  sections: PageSection[];
+}
+
+/**
+ * The "Brain" of the application.
+ * This JSON structure drives the entire UI.
+ */
+export interface AppManifest {
+  appName: string;
+  version: string;
+  pages: PageDefinition[];
 }

package/template/src/data/mock-charts.ts

@@ -0,0 +1,37 @@
+// src/data/mock-charts.ts
+import type { ChartData } from 'chart.js';
+
+// The centralized registry of "Heavy Data"
+export const MOCK_CHART_DATA: Record<string, ChartData<any>> = {
+  
+  // ID: energy_history
+  energy_history: {
+    labels: ["12am", "4am", "8am", "12pm", "4pm", "8pm"],
+    datasets: [
+      {
+        label: "Energy (kWh)",
+        data: [12, 19, 3, 5, 2, 3],
+        borderColor: "#3b82f6",
+        backgroundColor: "rgba(59, 130, 246, 0.5)",
+        tension: 0.4
+      }
+    ]
+  },
+
+  // ID: server_load
+  server_load: {
+    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    datasets: [
+      {
+        label: "CPU Load %",
+        data: [45, 52, 38, 70, 65, 30, 40],
+        borderColor: "#10b981",
+        backgroundColor: "rgba(16, 185, 129, 0.5)"
+      }
+    ]
+  }
+};
+
+export const getChartData = (id: string) => {
+  return MOCK_CHART_DATA[id] || null;
+};

package/template/src/data/mockData.ts

@@ -1,5 +1,6 @@
 // src/data/mockData.ts
 
+// --- 1. Your Existing Examples ---
 export const mockChartData = [
   { name: 'Jan', uv: 400, pv: 240 },
   { name: 'Feb', uv: 300, pv: 139 },
@@ -16,4 +17,27 @@ export const mockTableData = [
   { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
   { make: 'Mercedes', model: 'EQS', price: 102310, electric: true },
   { make: 'BMW', model: 'i4', price: 51400, electric: true },
-];
+];
+
+// 2. FIXED: Energy Data (Recharts Format)
+// Recharts expects an Array of Objects, NOT { labels, datasets }
+export const energyHistoryData = [
+  { time: "12am", value: 12 },
+  { time: "4am", value: 19 },
+  { time: "8am", value: 3 },
+  { time: "12pm", value: 5 },
+  { time: "4pm", value: 2 },
+  { time: "8pm", value: 3 }
+];
+
+// --- 3. The Lookup Registry ---
+// This allows the Manifest to refer to data by string ID.
+export const MOCK_DATA_REGISTRY: Record<string, any> = {
+  'energy_history': energyHistoryData,
+  'demo_chart': mockChartData,
+  'demo_cars': mockTableData
+};
+
+export const getMockData = (id: string) => {
+  return MOCK_DATA_REGISTRY[id] || null;
+};

package/template/src/generated/hooks.ts

@@ -1,47 +1,61 @@
-/**
- * @file hooks.ts
- * @generated by @ramme-io/builder
- * @description
- * This file is AUTO-GENERATED. Do not edit it directly.
- * It defines the "State Machine" for the application, initializing
- * all necessary signals based on the project manifest.
- */
+// ------------------------------------------------------------------
+// GENERATED ADAPTER CODE
+// Config: LIVE MODE (HTTP)
+// ------------------------------------------------------------------
+import { useEffect, useState } from 'react';
 
-import { useSignal } from '../hooks/useSignal';
+// Signal IDs defined in your Acme Corp schema
+export type SignalId = 'mrr_stripe' | 'active_users';
 
-/**
- * Initializes all global signals defined in the project.
- * This hook is called once by the Dashboard (or App root).
- */
-export const useGeneratedSignals = () => {
-  // 1. Living Room AC (Thermostat)
-  const living_room_ac = useSignal('living_room_ac', {
-    initialValue: 72,
-    min: 68,
-    max: 76,
-    unit: '°F'
+export function useGeneratedSignals() {
+  // 1. Initialize state with default values (0)
+  const [signals, setSignals] = useState<Record<SignalId, any>>({
+    'mrr_stripe': { value: 0, unit: 'USD', status: 'stale' },
+    'active_users': { value: 0, unit: '', status: 'stale' }
   });
 
-  // 2. Air Quality Sensor
-  const living_room_hum = useSignal('living_room_hum', {
-    initialValue: 45,
-    min: 40,
-    max: 60,
-    unit: '%'
-  });
+  // 2. HTTP Polling Implementation
+  useEffect(() => {
+    // Helper to extract nested data (e.g. "data.finance.mrr")
+    const getNestedValue = (obj: any, path: string) => {
+      return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+    };
 
-  // 3. Main Server CPU Load
-  const server_01 = useSignal('server_01', {
-    initialValue: 42,
-    min: 10,
-    max: 95,
-    unit: '%'
-  });
+    const pollEndpoints = async () => {
+      console.log('🔄 Polling /api_mock.json...');
+      
+      try {
+        const response = await fetch('/api_mock.json');
+        if (response.ok) {
+          const json = await response.json();
+          
+          // Update Signals based on the paths defined in manifest
+          setSignals(prev => ({
+            ...prev,
+            'mrr_stripe': { 
+              value: getNestedValue(json, 'data.finance.mrr'), 
+              unit: 'USD', 
+              status: 'fresh' 
+            },
+            'active_users': { 
+              value: getNestedValue(json, 'data.users.total'), 
+              unit: '', 
+              status: 'fresh' 
+            }
+          }));
+        }
+      } catch (err) {
+        console.error("API Polling Error:", err);
+      }
+    };
+
+    // Initial Fetch
+    pollEndpoints();
+    
+    // Poll every 5s
+    const interval = setInterval(pollEndpoints, 5000);
+    return () => clearInterval(interval);
+  }, []);
 
-  // Return a dictionary for easy O(1) lookup by signalId
-  return {
-    living_room_ac,
-    living_room_hum,
-    server_01,
-  };
-};
+  return signals;
+}

package/template/src/hooks/useAction.ts

@@ -0,0 +1,67 @@
+// src/hooks/useAction.ts
+import { useCallback } from 'react';
+import { useMqtt } from '../contexts/MqttContext';
+import { appManifest } from '../config/app.manifest';
+
+export const useAction = () => {
+  const { publish, isConnected } = useMqtt();
+  const { config, domain } = appManifest;
+
+  const sendAction = useCallback(async (entityId: string, value: any) => {
+    // 1. Find the Entity definition
+    const entity = domain.entities.find(e => e.id === entityId);
+    if (!entity) {
+      console.warn(`[Action] Entity not found: ${entityId}`);
+      return;
+    }
+
+    // 2. Find the Primary Signal (The target of the action)
+    const signalId = entity.signals[0];
+    const signal = domain.signals.find(s => s.id === signalId);
+
+    if (!signal) {
+      console.warn(`[Action] No signal linked to entity: ${entityId}`);
+      return;
+    }
+
+    // 3. EXECUTE based on Mode & Source
+    
+    // --- Mock Mode ---
+    if (config.mockMode) {
+      console.log(`%c[Mock Action] Setting ${entity.name} to:`, 'color: #10b981; font-weight: bold;', value);
+      // In a real app, we would update the local cache optimistically here
+      return;
+    }
+
+    // --- Live Mode (MQTT) ---
+    if (signal.source === 'mqtt' && signal.topic) {
+      if (!isConnected) {
+        console.warn('[Action] Cannot send: MQTT disconnected');
+        return;
+      }
+      const payload = typeof value === 'object' ? JSON.stringify(value) : String(value);
+      console.log(`[MQTT] Publishing to '${signal.topic}': ${payload}`);
+      publish(signal.topic, payload);
+    }
+
+    // --- Live Mode (HTTP) ---
+    if (signal.source === 'http' && signal.endpoint) {
+      console.log(`[HTTP] POST to ${signal.endpoint}:`, value);
+      // Note: This will likely fail (404/405) against a static .json file, 
+      // but this is the correct code for a real API.
+      try {
+        await fetch(signal.endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id: signal.id, value })
+        });
+      } catch (err) {
+        // We expect this to fail on the static demo, so we suppress the error alert
+        console.log('[HTTP] (Simulation) Request sent.'); 
+      }
+    }
+
+  }, [config.mockMode, isConnected, publish, domain]);
+
+  return { sendAction };
+};

package/template/src/hooks/useDevTools.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// Keys for localStorage to persist state across reloads
+const STORAGE_KEY_GHOST_MODE = 'ramme_dev_ghost_mode';
+
+export interface DevToolsState {
+  isGhostMode: boolean;
+  toggleGhostMode: () => void;
+}
+
+/**
+ * @hook useDevTools
+ * @description
+ * Manages the state of development tools within the running application.
+ * It persists preferences (like "Ghost Mode") to localStorage so debugging
+ * sessions aren't interrupted by refreshes.
+ */
+export const useDevTools = (): DevToolsState => {
+  // 1. Lazy initializer to read from storage immediately
+  const [isGhostMode, setIsGhostMode] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY_GHOST_MODE);
+      return stored ? JSON.parse(stored) : false;
+    } catch (e) {
+      console.warn('Failed to read dev tools state', e);
+      return false;
+    }
+  });
+
+  // 2. Toggle Handler with Persistence
+  const toggleGhostMode = useCallback(() => {
+    setIsGhostMode((prev) => {
+      const newValue = !prev;
+      try {
+        window.localStorage.setItem(STORAGE_KEY_GHOST_MODE, JSON.stringify(newValue));
+      } catch (e) {
+        console.warn('Failed to save dev tools state', e);
+      }
+      return newValue;
+    });
+  }, []);
+
+  // 3. Keyboard Shortcut (Optional but Pro-Level)
+  // Ctrl + Shift + G to toggle Ghost Mode
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.shiftKey && e.key === 'G') {
+        e.preventDefault();
+        toggleGhostMode();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleGhostMode]);
+
+  return { isGhostMode, toggleGhostMode };
+};

package/template/src/pages/Dashboard.tsx

@@ -1,65 +1,105 @@
 import React from 'react';
-import { PageHeader } from '@ramme-io/ui';
+import { PageHeader, ToggleSwitch, Button, Icon } from '@ramme-io/ui';
 
 // --- IMPORTS ---
 import { getComponent } from '../core/component-registry';
-import { dashboardLayout } from '../config/dashboard.layout';
-import { useGeneratedSignals } from '../generated/hooks'; // <-- The New Engine
+import { appManifest } from '../config/app.manifest'; 
+import { useGeneratedSignals } from '../generated/hooks';
+import type { EntityDefinition } from '../types/schema';
+import { useAction } from '../hooks/useAction';
+
+// --- DEV TOOLS (Restored) ---
+import { useDevTools } from '../hooks/useDevTools';
+import { GhostOverlay } from '../components/dev/GhostOverlay';
 
 const Dashboard: React.FC = () => {
-  // 1. Initialize the "Brain"
-  // This single line replaces all the hardcoded hooks.
+  // 1. Initialize State Machine
   const signals = useGeneratedSignals();
+  const { meta, domain } = appManifest;
+  
+  // 2. Initialize DevTools
+  const { isGhostMode, toggleGhostMode } = useDevTools();
+  const { sendAction } = useAction();
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-8 relative">
       <PageHeader
-        title="Command Center"
-        description="Real-time device monitoring and business analytics."
+        title={meta.name || "Command Center"}
+        description={meta.description || "Real-time device monitoring."}
+        actions={
+          // 3. Restore the Toggle Button
+          <Button 
+            variant={isGhostMode ? 'accent' : 'outline'} 
+            size="sm"
+            onClick={toggleGhostMode}
+            title="Toggle Ghost Mode (Ctrl+Shift+G)"
+          >
+            <Icon name={isGhostMode ? 'eye' : 'eye-off'} className="mr-2" />
+            {isGhostMode ? 'Ghost Mode: ON' : 'Dev Tools'}
+          </Button>
+        }
       />
 
       {/* --- DYNAMIC RUNTIME ENGINE --- */}
-      {dashboardLayout.map((section) => (
-        <div key={section.id}>
-          <h3 className="text-lg font-semibold mb-4 text-foreground">
-            {section.title}
-          </h3>
+      <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        
+        {domain.entities.map((entity: EntityDefinition) => {
+          // A. Resolve Component & Data
+          const componentType = entity.ui?.dashboardComponent || 'DeviceCard';
+          const Component = getComponent(componentType);
           
-          <div 
-            className="grid gap-6"
-            // Use the 'columns' prop from the manifest to control density
-            style={{ 
-              gridTemplateColumns: `repeat(${section.columns || 3}, minmax(300px, 1fr))` 
-            }}
-          >
-            {section.items.map((item) => {
-              const Component = getComponent(item.component);
-              
-              // Prepare Props
-              let dynamicProps = { ...item.props };
+          const primarySignalId = entity.signals[0];
+          const signal = primarySignalId ? signals[primarySignalId as keyof typeof signals] : null;
 
-              // Inject Signal Data
-              if (item.signalId && signals[item.signalId as keyof typeof signals]) {
-                const sig = signals[item.signalId as keyof typeof signals];
-                
-                // Standard Value Injection
-                dynamicProps.value = `${sig.value}${sig.unit}`;
-                
-                // Auto-Status Logic (The "Smart" Layer)
-                // If a signal exceeds its defined max, auto-flag it as error
-                if (sig.value > (sig.max || 100)) {
-                    dynamicProps.status = 'error';
-                    dynamicProps.trend = 'CRITICAL';
-                }
-              }
+          // B. Prepare Props
+          const dynamicProps: any = {
+            title: entity.name,
+            description: entity.description || `ID: ${entity.id}`,
+            icon: entity.ui?.icon || 'activity',
+            status: 'offline',
+          };
 
-              return (
-                <Component key={item.id} {...dynamicProps} />
+          // C. Inject Signal Data
+          if (signal) {
+            dynamicProps.value = `${signal.value} ${signal.unit || ''}`;
+            dynamicProps.status = 'active';
+
+            if (componentType === 'ToggleCard') {
+              dynamicProps.children = (
+                <div className="flex items-center justify-between mt-2">
+                  <span className="text-sm text-muted-foreground">Active</span>
+                  <ToggleSwitch 
+                    label="Toggle"
+                    checked={(signal.value as any) === true || signal.value === 'true' || signal.value === 1}
+                    // THE UPDATE:
+                    onChange={(val) => sendAction(entity.id, val)} 
+                  />
+                </div>
               );
-            })}
-          </div>
+              delete dynamicProps.value; 
+            }
+          }
+
+          return (
+            // 4. Restore the GhostOverlay Wrapper
+            <GhostOverlay
+              key={entity.id}
+              isActive={isGhostMode}
+              componentId={entity.id}
+              componentType={componentType}
+              signalId={primarySignalId}
+            >
+              <Component {...dynamicProps} />
+            </GhostOverlay>
+          );
+        })}
+      </div>
+      
+      {domain.entities.length === 0 && (
+        <div className="p-12 text-center border-2 border-dashed border-slate-200 rounded-lg text-slate-400">
+          <p>No entities defined.</p>
         </div>
-      ))}
+      )}
     </div>
   );
 };

package/template/src/types/schema.ts

@@ -1,8 +1,7 @@
 import { z } from 'zod';
 
 // ------------------------------------------------------------------
-// 1. Signal Schema (The "Nerve")
-// Defines a single data point (e.g., "Living Room Temp", "Light Switch")
+// 1. Signal Schema
 // ------------------------------------------------------------------
 export const SignalSchema = z.object({
   id: z.string().min(1, "Signal ID is required"),
@@ -10,15 +9,16 @@ export const SignalSchema = z.object({
   description: z.string().optional(),
   
   // Classification
-  kind: z.enum(['sensor', 'actuator', 'setpoint', 'metric', 'status']),
+  kind: z.enum(['sensor', 'actuator', 'setpoint', 'metric', 'status', 'kpi']),
   
-  // Data Source Configuration (CRITICAL for the Adapter Factory)
+  // Data Source Configuration
   source: z.enum(['mock', 'mqtt', 'http', 'derived', 'local']),
   
-  // Source-Specific Config 
-  topic: z.string().optional(),      // For MQTT (e.g., "home/living/temp")
-  endpoint: z.string().optional(),   // For HTTP (e.g., "/api/v1/weather")
-  refreshRate: z.number().default(1000), 
+  // Protocol-Specific Config 
+  topic: z.string().optional(),      // For MQTT
+  endpoint: z.string().optional(),   // For HTTP
+  jsonPath: z.string().optional(),   // For parsing nested API responses
+  refreshRate: z.number().optional().default(1000), 
   
   // Value Configuration
   defaultValue: z.any().optional(),
@@ -33,8 +33,7 @@ export type SignalDefinition = z.infer<typeof SignalSchema>;
 
 
 // ------------------------------------------------------------------
-// 2. Entity Schema (The "Atom")
-// Defines a grouping of signals into a logical object (e.g., "Smart Thermostat")
+// 2. Entity Schema
 // ------------------------------------------------------------------
 export const EntitySchema = z.object({
   id: z.string(),
@@ -42,26 +41,26 @@ export const EntitySchema = z.object({
   description: z.string().optional(),
   
   // Taxonomy
-  type: z.string(), // e.g., 'device', 'room', 'service'
-  category: z.enum(['hardware', 'software', 'logical']).default('logical'),
+  type: z.string(), 
+  category: z.string().default('logical'), 
 
-  // The Signals that belong to this entity (References Signal IDs)
+  // Linkage
   signals: z.array(z.string()), 
   
-  // UI Hints (How should this entity look?)
+  // UI Hints
   ui: z.object({
-    icon: z.string().optional(), // IconName
+    icon: z.string().optional(), 
     color: z.string().optional(),
-    dashboardComponent: z.string().optional(), // e.g., 'DeviceCard'
+    dashboardComponent: z.string().optional(),
   }).optional(),
 });
 
+// <--- THIS WAS MISSING
 export type EntityDefinition = z.infer<typeof EntitySchema>;
 
 
 // ------------------------------------------------------------------
-// 3. App Specification (The "Master Plan")
-// This is the JSON structure the App Builder will generate.
+// 3. App Specification (The Root Object)
 // ------------------------------------------------------------------
 export const AppSpecificationSchema = z.object({
   meta: z.object({
@@ -72,15 +71,13 @@ export const AppSpecificationSchema = z.object({
     createdAt: z.string().optional(),
   }),
   
-  // The Data Layer
   domain: z.object({
     signals: z.array(SignalSchema),
     entities: z.array(EntitySchema),
   }),
 
-  // Global Config
   config: z.object({
-    theme: z.enum(['light', 'dark', 'system']).default('system'),
+    theme: z.enum(['light', 'dark', 'system', 'corporate', 'midnight', 'blueprint']).default('system'),
     mockMode: z.boolean().default(true), 
   }),
 });

package/template/dist/assets/a-arrow-down-o3jEYjRh-Df7ccS2K.js

@@ -1,6 +0,0 @@
-import{k as a}from"./createLucideIcon-B021CSfi-Dd5ucQio.js";import"./index-c9bsExPa.js";/**
- * @license lucide-react v0.537.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const t=[["path",{d:"m14 12 4 4 4-4",key:"buelq4"}],["path",{d:"M18 16V7",key:"ty0viw"}],["path",{d:"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16",key:"d5nyq2"}],["path",{d:"M3.304 13h6.392",key:"1q3zxz"}]],e=a("a-arrow-down",t);export{t as __iconNode,e as default};

package/template/dist/assets/a-arrow-up-D8GHcZyy-CTU0upfj.js

@@ -1,6 +0,0 @@
-import{k as a}from"./createLucideIcon-B021CSfi-Dd5ucQio.js";import"./index-c9bsExPa.js";/**
- * @license lucide-react v0.537.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const t=[["path",{d:"m14 11 4-4 4 4",key:"1pu57t"}],["path",{d:"M18 16V7",key:"ty0viw"}],["path",{d:"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16",key:"d5nyq2"}],["path",{d:"M3.304 13h6.392",key:"1q3zxz"}]],d=a("a-arrow-up",t);export{t as __iconNode,d as default};

package/template/dist/assets/a-large-small-D3r2E2Qm-BMML8Ozk.js

@@ -1,6 +0,0 @@
-import{k as a}from"./createLucideIcon-B021CSfi-Dd5ucQio.js";import"./index-c9bsExPa.js";/**
- * @license lucide-react v0.537.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const t=[["path",{d:"m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16",key:"xik6mr"}],["path",{d:"M15.697 14h5.606",key:"1stdlc"}],["path",{d:"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16",key:"d5nyq2"}],["path",{d:"M3.304 13h6.392",key:"1q3zxz"}]],m=a("a-large-small",t);export{t as __iconNode,m as default};

package/template/dist/assets/accessibility-DqUzmKhE-BID2Ms0e.js

@@ -1,6 +0,0 @@
-import{k as t}from"./createLucideIcon-B021CSfi-Dd5ucQio.js";import"./index-c9bsExPa.js";/**
- * @license lucide-react v0.537.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const a=[["circle",{cx:"16",cy:"4",r:"1",key:"1grugj"}],["path",{d:"m18 19 1-7-6 1",key:"r0i19z"}],["path",{d:"m5 8 3-3 5.5 3-2.36 3.5",key:"9ptxx2"}],["path",{d:"M4.24 14.5a5 5 0 0 0 6.88 6",key:"10kmtu"}],["path",{d:"M13.76 17.5a5 5 0 0 0-6.88-6",key:"2qq6rc"}]],r=t("accessibility",a);export{a as __iconNode,r as default};