@djangocfg/ui-tools 2.1.268 → 2.1.271

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.268",
+  "version": "2.1.271",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -90,8 +90,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.268",
-    "@djangocfg/ui-core": "^2.1.268",
+    "@djangocfg/i18n": "^2.1.271",
+    "@djangocfg/ui-core": "^2.1.271",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "react": "^19.1.0",
@@ -133,10 +133,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.268",
+    "@djangocfg/i18n": "^2.1.271",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.268",
-    "@djangocfg/ui-core": "^2.1.268",
+    "@djangocfg/typescript-config": "^2.1.271",
+    "@djangocfg/ui-core": "^2.1.271",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/OpenapiViewer/README.md

@@ -0,0 +1,121 @@
+# OpenapiViewer
+
+An interactive OpenAPI 3.x playground — browse endpoints, build requests, and inspect responses. Designed as a minimal, three-column developer tool (similar in spirit to Swagger UI / Scalar, but embedded in the app shell).
+
+## Usage
+
+```tsx
+import { Playground } from '@djangocfg/ui-tools/openapi';
+
+<Playground
+  config={{
+    schemas: [
+      { id: 'petstore', name: 'Petstore API', url: 'https://petstore3.swagger.io/api/v3/openapi.json' },
+    ],
+    defaultSchemaId: 'petstore',
+  }}
+/>
+```
+
+For lazy-loading (recommended in production):
+
+```tsx
+import { LazyOpenapiViewer } from '@djangocfg/ui-tools/openapi/lazy';
+
+<LazyOpenapiViewer config={config} />
+```
+
+## Layout
+
+### Desktop (≥ 768 px) — three columns
+
+```
+┌──────────────────┬─────────────────────┬─────────────────────┐
+│   ENDPOINTS      │   REQUEST           │   RESPONSE          │
+│                  │                     │                     │
+│  🔍 Search  [⊞] │  POST /api/v3/user  │  200 OK   0.4 KB   │
+│                  │  ─────────────────  │  ─────────────────  │
+│  POST /pet       │  Path Parameters    │  { "id": 1, ... }  │
+│  GET  /pet/…     │  Query Parameters   │                     │
+│  PUT  /pet/…     │  Body               │                     │
+│  …               │  ▶ Auth & Headers   │                     │
+│                  │  ▶ cURL             │                     │
+│                  │  ─────────────────  │                     │
+│                  │  [Send Request]     │                     │
+└──────────────────┴─────────────────────┴─────────────────────┘
+```
+
+### Mobile (< 768 px) — three tabs
+
+Tab bar at the top: **Endpoints → Request → Response**.  
+Tabs switch automatically when an endpoint is selected and after a successful request.
+
+## File Structure
+
+```
+OpenapiViewer/
+├── index.tsx                    # Main export: <Playground config={…} />
+├── lazy.tsx                     # Lazy-loaded variant: <LazyOpenapiViewer />
+├── types.ts                     # All TypeScript types
+├── constants.ts                 # HTTP method/status colour maps
+├── README.md                    # ← you are here
+│
+├── context/
+│   └── PlaygroundContext.tsx    # Global state (endpoint, request, response, auth)
+│
+├── hooks/
+│   ├── useOpenApiSchema.ts      # Fetches & parses OpenAPI schema; caches per URL
+│   └── useMobile.ts             # Thin wrapper around useIsMobile from ui-core
+│
+├── utils/
+│   ├── formatters.ts            # getMethodColor, getStatusColor, isValidJson, …
+│   ├── versionManager.ts        # Endpoint version detection & deduplication
+│   ├── apiKeyManager.ts         # X-API-Key header helpers
+│   └── index.ts
+│
+└── components/
+    ├── index.ts                 # Re-exports PlaygroundLayout
+    └── PlaygroundLayout/        # Three-panel layout (all panels live here)
+        ├── index.tsx            # Root: DesktopView / MobileView router
+        ├── EndpointList.tsx     # Left panel: search, filter, schema switcher, list
+        ├── RequestPanel.tsx     # Middle panel: params, body, auth, cURL, send
+        ├── ResponsePanel.tsx    # Right panel: status, JsonTree / raw fallback
+        └── ui.tsx               # Shared atoms: MethodBadge, StatusBadge, Panel, …
+```
+
+## Key Design Decisions
+
+| Topic | Decision |
+|---|---|
+| **No stepper** | All three panels visible simultaneously on desktop; tabs on mobile |
+| **Collapsed sections** | Auth & Headers and cURL start collapsed to reduce visual noise |
+| **JSON normalisation** | `ResponsePanel` always tries `JSON.parse` before rendering; falls back to `<pre>` for non-JSON bodies |
+| **Hover-only toolbar** | `PrettyCode` language badge + copy button appear only on hover |
+| **Data before JSX** | All derived values (`isFiltered`, `hasCurl`, `epPath`, …) computed before `return` — no logic in JSX |
+| **Static configs** | `JSON_TREE_CONFIG`, `MOBILE_TABS`, style maps are module-level constants |
+| **Lazy loading** | `PlaygroundLayout` is lazy-loaded via `Suspense` to keep the initial bundle small |
+
+## Config Reference
+
+```ts
+interface PlaygroundConfig {
+  /** Array of OpenAPI 3.x schema URLs */
+  schemas: SchemaSource[];
+  /** Schema to select on first render */
+  defaultSchemaId?: string;
+}
+
+interface SchemaSource {
+  id: string;   // unique key
+  name: string; // display name in the switcher combobox
+  url: string;  // full URL to fetch the JSON schema from
+}
+```
+
+## Auth
+
+Bearer token priority (highest wins):
+
+1. Manual token entered in the **Auth & Headers** section
+2. JWT from `localStorage` key `auth_token`
+3. X-API-Key header (when an API key is selected — currently disabled pending CFG context)

package/src/tools/OpenapiViewer/components/PlaygroundLayout/EndpointList.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import { ChevronRight, Filter, Search } from 'lucide-react';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import {
+    Combobox,
+    DownloadButton,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+    Input,
+    Skeleton,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { usePlaygroundContext } from '../../context/PlaygroundContext';
+import useOpenApiSchema from '../../hooks/useOpenApiSchema';
+import { deduplicateEndpoints } from '../../utils/versionManager';
+import { MethodBadge, ScrollArea, relativePath } from './ui';
+
+// ─── Endpoint row ─────────────────────────────────────────────────────────────
+
+function EndpointRow({
+    method,
+    path,
+    description,
+    isActive,
+    onClick,
+}: {
+    method: string;
+    path: string;
+    description: string;
+    isActive: boolean;
+    onClick: () => void;
+}) {
+    const displayPath = relativePath(path);
+    const rowCls = cn(
+        'group w-full text-left flex items-start gap-2.5 px-3 py-2.5 transition-colors hover:bg-muted/40',
+        isActive && 'bg-primary/[0.06] hover:bg-primary/[0.09]',
+    );
+    const arrowCls = cn(
+        'h-3.5 w-3.5 shrink-0 mt-px transition-opacity',
+        isActive ? 'text-primary opacity-100' : 'opacity-0 group-hover:opacity-30',
+    );
+
+    return (
+        <button className={rowCls} onClick={onClick}>
+            <MethodBadge method={method} />
+            <div className="flex-1 min-w-0">
+                <p className="font-mono text-[11px] text-foreground/75 truncate leading-tight">
+                    {displayPath}
+                </p>
+                {description && (
+                    <p className="text-[10px] text-muted-foreground/60 truncate leading-tight mt-0.5">
+                        {description}
+                    </p>
+                )}
+            </div>
+            <ChevronRight className={arrowCls} />
+        </button>
+    );
+}
+
+// ─── EndpointList ─────────────────────────────────────────────────────────────
+
+export function EndpointList() {
+    const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } =
+        usePlaygroundContext();
+    const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } =
+        useOpenApiSchema({ schemas: config.schemas, defaultSchemaId: config.defaultSchemaId });
+
+    // ── Debounced search ──────────────────────────────────────────────────────
+    const [debouncedSearch, setDebouncedSearch] = useState(state.searchTerm);
+    useEffect(() => {
+        const id = setTimeout(() => setDebouncedSearch(state.searchTerm), 150);
+        return () => clearTimeout(id);
+    }, [state.searchTerm]);
+
+    // ── Data ──────────────────────────────────────────────────────────────────
+    const schemaOptions = useMemo(
+        () => schemas.map((s) => ({ value: s.id, label: s.name })),
+        [schemas],
+    );
+
+    const filtered = useMemo(() => {
+        let list = deduplicateEndpoints(endpoints, state.selectedVersion);
+        if (state.selectedCategory !== 'All') {
+            list = list.filter((e) => e.category === state.selectedCategory);
+        }
+        if (debouncedSearch) {
+            const q = debouncedSearch.toLowerCase();
+            list = list.filter((e) =>
+                e.name.toLowerCase().includes(q) ||
+                e.description.toLowerCase().includes(q) ||
+                e.path.toLowerCase().includes(q),
+            );
+        }
+        return list;
+    }, [endpoints, state.selectedCategory, debouncedSearch, state.selectedVersion]);
+
+    // ── Derived ───────────────────────────────────────────────────────────────
+    const isFiltered = state.selectedCategory !== 'All';
+    const hasCategories = categories.length > 0;
+    const hasMultipleSchemas = schemas.length > 1;
+    const endpointLabel = `${filtered.length} endpoint${filtered.length !== 1 ? 's' : ''}`;
+    const downloadFilename = currentSchema ? `${currentSchema.id}-openapi.json` : 'openapi.json';
+
+    // ── Early returns ─────────────────────────────────────────────────────────
+    if (loading) {
+        return (
+            <div className="p-3 space-y-1.5">
+                {Array.from({ length: 12 }).map((_, i) => (
+                    <Skeleton key={i} className="h-10 w-full rounded" />
+                ))}
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="p-4">
+                <p className="text-xs text-destructive">Failed to load schema: {error}</p>
+            </div>
+        );
+    }
+
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (
+        <>
+            {/* Toolbar */}
+            <div className="shrink-0 border-b px-2.5 py-2 space-y-2">
+                {hasMultipleSchemas && (
+                    <Combobox
+                        options={schemaOptions}
+                        value={currentSchema?.id ?? ''}
+                        onValueChange={(id) => id && setCurrentSchema(id)}
+                        placeholder="Select API"
+                        searchPlaceholder="Search APIs…"
+                        emptyText="No APIs found"
+                        className="w-full h-8 text-xs"
+                    />
+                )}
+
+                <div className="flex gap-1.5">
+                    <div className="relative flex-1 min-w-0">
+                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" />
+                        <Input
+                            placeholder="Search endpoints…"
+                            value={state.searchTerm}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                            className="pl-8 h-8 text-xs"
+                        />
+                    </div>
+
+                    {hasCategories && (
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <button className={cn(
+                                    'relative shrink-0 flex items-center justify-center h-8 w-8 rounded-md border transition-colors',
+                                    isFiltered
+                                        ? 'border-primary bg-primary/10 text-primary'
+                                        : 'border-input bg-background text-muted-foreground hover:text-foreground hover:bg-muted/50',
+                                )}>
+                                    <Filter className="h-3.5 w-3.5" />
+                                    {isFiltered && (
+                                        <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" />
+                                    )}
+                                </button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="min-w-[160px] max-h-72 overflow-y-auto">
+                                {['All', ...categories].map((c) => (
+                                    <DropdownMenuItem
+                                        key={c}
+                                        onClick={() => setSelectedCategory(c)}
+                                        className={cn('text-xs', state.selectedCategory === c && 'bg-accent font-medium')}
+                                    >
+                                        {c}
+                                    </DropdownMenuItem>
+                                ))}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    )}
+                </div>
+            </div>
+
+            {/* Meta row */}
+            <div className="shrink-0 flex items-center justify-between px-3 py-1 border-b bg-muted/20">
+                <span className="text-[10px] text-muted-foreground/50 tabular-nums">{endpointLabel}</span>
+                {currentSchema && (
+                    <DownloadButton
+                        url={currentSchema.url}
+                        filename={downloadFilename}
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 px-2 text-[10px] text-muted-foreground/50 hover:text-foreground"
+                    >
+                        JSON
+                    </DownloadButton>
+                )}
+            </div>
+
+            {/* List */}
+            <ScrollArea>
+                {filtered.length === 0 ? (
+                    <div className="py-10 text-center text-xs text-muted-foreground">No endpoints found</div>
+                ) : (
+                    <div className="divide-y divide-border/40">
+                        {filtered.map((ep) => (
+                            <EndpointRow
+                                key={`${ep.method}-${ep.path}`}
+                                method={ep.method}
+                                path={ep.path}
+                                description={ep.description}
+                                isActive={
+                                    state.selectedEndpoint?.path === ep.path &&
+                                    state.selectedEndpoint?.method === ep.method
+                                }
+                                onClick={() => setSelectedEndpoint(ep)}
+                            />
+                        ))}
+                    </div>
+                )}
+            </ScrollArea>
+        </>
+    );
+}

package/src/tools/OpenapiViewer/components/PlaygroundLayout/RequestPanel.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { Key, Loader2, Send, Sparkles, Terminal } from 'lucide-react';
+import React, { useMemo } from 'react';
+
+import {
+    Button,
+    CopyButton,
+    Input,
+    Textarea,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import PrettyCode from '../../../PrettyCode';
+import { usePlaygroundContext } from '../../context/PlaygroundContext';
+import { findApiKeyById, isValidJson, parseRequestHeaders } from '../../utils';
+import {
+    CollapsibleSection,
+    EmptyState,
+    MethodBadge,
+    ScrollArea,
+    SectionLabel,
+    StatusBadge,
+    relativePath,
+} from './ui';
+
+// ─── Param fields ─────────────────────────────────────────────────────────────
+
+type Param = { name: string; type: string; required: boolean; description?: string };
+
+function ParamFields({ label, params }: { label: string; params: Param[] }) {
+    const { state, setParameters } = usePlaygroundContext();
+
+    function handleChange(name: string, value: string) {
+        setParameters({ ...state.parameters, [name]: value });
+    }
+
+    return (
+        <div className="space-y-2">
+            <SectionLabel>{label}</SectionLabel>
+            <div className="space-y-2">
+                {params.map((p) => {
+                    const value = state.parameters[p.name] ?? '';
+                    const placeholder = p.description || p.name;
+                    return (
+                        <div key={p.name} className="space-y-1">
+                            <div className="flex items-center gap-1.5">
+                                <span className="font-mono text-[11px] text-foreground/80">{p.name}</span>
+                                {p.required && (
+                                    <span className="text-[9px] text-destructive font-bold leading-none">*</span>
+                                )}
+                                <span className="font-mono text-[10px] text-muted-foreground/50">{p.type}</span>
+                            </div>
+                            <Input
+                                value={value}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    handleChange(p.name, e.target.value)
+                                }
+                                placeholder={placeholder}
+                                className="h-8 text-xs font-mono"
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+// ─── RequestPanel ─────────────────────────────────────────────────────────────
+
+export function RequestPanel() {
+    const { state, apiKeys, setRequestBody, setRequestHeaders, setManualApiToken, sendRequest } =
+        usePlaygroundContext();
+
+    const ep = state.selectedEndpoint;
+
+    // ── Data (hooks must not be conditional) ─────────────────────────────────
+    const isJsonValid = state.requestBody ? isValidJson(state.requestBody) : true;
+
+    const curlCommand = useMemo(() => {
+        if (!state.requestUrl) return '';
+        const apiKey = state.selectedApiKey ? findApiKeyById(apiKeys, state.selectedApiKey) : null;
+        const hdrs = parseRequestHeaders(state.requestHeaders);
+        if (apiKey) hdrs['X-API-Key'] = apiKey.id;
+        let cmd = `curl -X ${state.requestMethod} "${state.requestUrl}"`;
+        Object.entries(hdrs).forEach(([k, v]) => { cmd += ` \\\n  -H "${k}: ${v}"`; });
+        if (state.requestBody && state.requestMethod !== 'GET' && isJsonValid) {
+            cmd += ` \\\n  -d '${state.requestBody}'`;
+        }
+        return cmd;
+    }, [state, apiKeys, isJsonValid]);
+
+    const pathParams = useMemo(
+        () => ep?.parameters?.filter((p) => ep.path.includes(`{${p.name}}`)) ?? [],
+        [ep],
+    );
+    const queryParams = useMemo(
+        () => ep?.parameters?.filter((p) => !ep.path.includes(`{${p.name}}`)) ?? [],
+        [ep],
+    );
+
+    // ── Derived ───────────────────────────────────────────────────────────────
+    const isSendDisabled = state.loading || !state.requestUrl || !isJsonValid;
+    const displayUrl     = state.requestUrl || ep?.path || '';
+    const hasBody        = ep?.method !== 'GET';
+    const bodyType       = ep?.requestBody?.type ?? '';
+    const hasPathParams  = pathParams.length > 0;
+    const hasQueryParams = queryParams.length > 0;
+    const hasCurl        = Boolean(curlCommand);
+    const epPath         = ep ? relativePath(ep.path) : '';
+    const urlChanged     = displayUrl !== epPath;
+
+    // ── Early return ──────────────────────────────────────────────────────────
+    if (!ep) {
+        return <EmptyState icon={Send} text="Select an endpoint to build a request" />;
+    }
+
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (
+        <>
+            {/* Endpoint header */}
+            <div className="shrink-0 border-b px-4 py-3 bg-muted/20 space-y-1.5">
+                <div className="flex items-center gap-2">
+                    <MethodBadge method={ep.method} />
+                    <span className="font-mono text-xs text-foreground/70 truncate min-w-0 flex-1">{epPath}</span>
+                    <Button
+                        onClick={sendRequest}
+                        disabled={isSendDisabled}
+                        size="sm"
+                        className="shrink-0 gap-1.5 h-7 text-xs px-3"
+                    >
+                        {state.loading
+                            ? <><Loader2 className="h-3 w-3 animate-spin" /> Sending…</>
+                            : <><Send className="h-3 w-3" /> Send</>
+                        }
+                    </Button>
+                </div>
+                {urlChanged && (
+                    <div className="font-mono text-[10px] text-muted-foreground/50 break-all leading-snug pl-0.5">
+                        {displayUrl}
+                    </div>
+                )}
+            </div>
+
+            {/* Scrollable fields */}
+            <ScrollArea className="px-4 py-3 space-y-3">
+
+                {hasPathParams  && <ParamFields label="Path Parameters"  params={pathParams} />}
+                {hasQueryParams && <ParamFields label="Query Parameters" params={queryParams} />}
+
+                {/* Body */}
+                {hasBody && (
+                    <div className="space-y-1.5">
+                        <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-baseline gap-2">
+                                <SectionLabel>Body</SectionLabel>
+                                {bodyType && (
+                                    <span className="text-[10px] text-muted-foreground/40 font-mono">{bodyType}</span>
+                                )}
+                            </div>
+                            {isJsonValid && state.requestBody && (
+                                <button
+                                    type="button"
+                                    onClick={() => {
+                                        try {
+                                            setRequestBody(JSON.stringify(JSON.parse(state.requestBody), null, 2));
+                                        } catch {}
+                                    }}
+                                    className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+                                >
+                                    <Sparkles className="h-2.5 w-2.5" />
+                                    Format
+                                </button>
+                            )}
+                        </div>
+                        <Textarea
+                            placeholder={'{\n  "key": "value"\n}'}
+                            value={state.requestBody}
+                            onChange={(e) => setRequestBody(e.target.value)}
+                            className={cn(
+                                'font-mono text-[11px] min-h-[90px] resize-y',
+                                !isJsonValid && 'border-destructive focus-visible:ring-destructive/30',
+                            )}
+                            rows={4}
+                        />
+                        {!isJsonValid && <p className="text-[10px] text-destructive">Invalid JSON</p>}
+                    </div>
+                )}
+
+                {/* Auth & Headers — collapsed by default */}
+                <CollapsibleSection
+                    label={
+                        <span className="inline-flex items-center gap-1">
+                            <Key className="h-2.5 w-2.5" />
+                            Auth &amp; Headers
+                        </span>
+                    }
+                >
+                    <div className="space-y-3 pt-2">
+                        <div className="space-y-1.5">
+                            <SectionLabel>Bearer Token</SectionLabel>
+                            <Input
+                                type="password"
+                                placeholder="Leave empty to use JWT from localStorage"
+                                value={state.manualApiToken}
+                                onChange={(e) => setManualApiToken(e.target.value)}
+                                className="font-mono text-xs h-8"
+                            />
+                        </div>
+                        <div className="space-y-1.5">
+                            <SectionLabel>Headers</SectionLabel>
+                            <Textarea
+                                value={state.requestHeaders}
+                                onChange={(e) => setRequestHeaders(e.target.value)}
+                                className="font-mono text-[11px] min-h-[60px] resize-y"
+                                rows={3}
+                            />
+                        </div>
+                    </div>
+                </CollapsibleSection>
+
+                {/* cURL — collapsed by default */}
+                {hasCurl && (
+                    <CollapsibleSection
+                        label={
+                            <span className="inline-flex items-center gap-1">
+                                <Terminal className="h-2.5 w-2.5" />
+                                cURL
+                            </span>
+                        }
+                        action={
+                            <CopyButton value={curlCommand} variant="ghost" size="sm" className="h-5 px-2 text-[10px] text-muted-foreground">
+                                Copy
+                            </CopyButton>
+                        }
+                    >
+                        <div className="rounded-md overflow-hidden mt-2">
+                            <PrettyCode data={curlCommand} language="bash" isCompact />
+                        </div>
+                    </CollapsibleSection>
+                )}
+
+                <div className="h-1" />
+            </ScrollArea>
+
+            {/* Send footer */}
+            <div className="shrink-0 border-t px-4 py-3 bg-background/95 backdrop-blur-sm">
+                <Button onClick={sendRequest} disabled={isSendDisabled} size="sm" className="w-full gap-2 h-9">
+                    {state.loading
+                        ? <><Loader2 className="h-3.5 w-3.5 animate-spin" /> Sending…</>
+                        : <><Send className="h-3.5 w-3.5" /> Send Request</>
+                    }
+                </Button>
+            </div>
+        </>
+    );
+}