@principal-ai/principal-view-react 0.16.63 → 0.16.65

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -32,11 +32,12 @@ import {
   applyNodeChanges,
 } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
-import { Map as MapIcon, X } from 'lucide-react';
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
 import {
   buildSubsystemGraph,
   MECHANISM_COLOR,
+  MECHANISM_DESCRIPTIONS,
   subsystemGraphLayoutKey,
   type SubsystemComponentEdge,
   type SubsystemComponent,
@@ -50,7 +51,6 @@ import { GraphLayoutCover } from './GraphLayoutCover';
 import { ComponentDeclaration } from './ComponentDeclaration';
 import type { ComponentVerificationState } from './ComponentDeclaration';
 import { FileDrawer } from './FileDrawer';
-import { EdgeLegendModal, MECHANISM_DESCRIPTIONS } from './EdgeLegendModal';
 import { buildRepoGroups, repoAvatarUrl, type RepoGroup } from './paths';
 
 /** Cap screen-space edge labels to this fraction of the edge's on-screen length. */
@@ -91,8 +91,6 @@ export interface SubsystemComponentGraphProps {
   maxNodeWidth?: number;
   /** Show edge labels (mechanism names) on the graph. @default true */
   showEdgeLabels?: boolean;
-  /** Show the mechanism-legend button overlay on the canvas. @default true */
-  showLegend?: boolean;
   /** Subsystem title displayed in the sidebar. */
   title?: string;
   /**
@@ -123,8 +121,8 @@ export interface SubsystemComponentGraphProps {
   renderFileViewer?: (file: string, opts?: SubsystemOpenFileOptions) => ReactNode;
   /**
    * Host-injected multi-snippet viewer for a focused throughline. When set,
-   * clicking a flow step (or the whole flow) opens the bottom drawer with
-   * this content and updates it as the focused step changes.
+   * clicking a flow step opens the bottom drawer with this content and
+   * updates it as the focused step changes.
    */
   renderThroughlineViewer?: (ctx: ThroughlineViewerContext) => ReactNode;
   /**
@@ -185,7 +183,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showLegend, title, hideSidebar, graphTitle, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, renderThroughlineViewer, onFileSelect, onVerifyComponent, componentVerification }: InnerProps) {
+function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, title, hideSidebar, graphTitle, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, renderThroughlineViewer, onFileSelect, onVerifyComponent, componentVerification }: InnerProps) {
   const { theme } = useTheme();
   const { fitView } = useReactFlow();
   const viewport = useViewport();
@@ -197,8 +195,6 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
   const [selected, setSelected] = useState<SubsystemComponent | null>(null);
   /** Bottom drawer: single file or throughline multi-snippet mode. */
   const [drawerTarget, setDrawerTarget] = useState<DrawerTarget | null>(null);
-  // Edge-legend modal visibility (opened from the canvas's top-left button).
-  const [legendOpen, setLegendOpen] = useState(false);
   // Component the pointer is over (null on leave) → transient tree highlight.
   const [hoveredComponentId, setHoveredComponentId] = useState<string | null>(null);
   // Throughline focus — selected flow (or step) is full strength; other
@@ -213,6 +209,12 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
   // Throughline flows the user has expanded (via the title row). Closed by
   // default so a graph with several flows doesn't dump every step list at once.
   const [expandedThroughlines, setExpandedThroughlines] = useState<Set<string>>(new Set());
+  // Sidebar description visibility. Hidden by default so the files/flows
+  // panel gets the vertical room; the title-row toggle reveals it.
+  const [descriptionVisible, setDescriptionVisible] = useState(false);
+  const [descToggleHover, setDescToggleHover] = useState(false);
+  // `true` only when a description exists AND the user opened it.
+  const showDesc = !!description && descriptionVisible;
   // Ref mirror of `selected` so the SUBSYSTEM_CALLBACKS click handler (a
   // closure over the effect deps) can toggle without a stale value.
   const selectedRef = useRef<SubsystemComponent | null>(null);
@@ -688,7 +690,9 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
 
   // Focus an entire flow: hide everything but the flow's nodes and edges, and
   // frame the flow on the canvas. Selection state is cleared — the graph now
-  // reads as the narrative. Opens the throughline drawer when a viewer is set.
+  // reads as the narrative. No drawer: the code view only opens on a step
+  // click. A stale throughline drawer (from a previously focused flow's step)
+  // closes; an explicitly opened file drawer stays.
   const focusThroughlineEdges = useCallback(
     (tl: SubsystemThroughline) => {
       setSelected(null);
@@ -696,18 +700,9 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
       setFocusedStepIndex(null);
       setFocusedThroughlineId(tl.id);
       fitFocusBounds(new Set(tl.steps.map((s) => s.edgeId)));
-      if (renderThroughlineViewer) {
-        setDrawerTarget({ kind: 'throughline', throughlineId: tl.id, stepIndex: null });
-      } else if (tl.steps[0]) {
-        // Fallback: single-file snippet of the first step.
-        setDrawerTarget({
-          kind: 'file',
-          file: tl.steps[0].file,
-          startLine: tl.steps[0].line,
-        });
-      }
+      setDrawerTarget((prev) => (prev?.kind === 'throughline' ? null : prev));
     },
-    [fitFocusBounds, renderThroughlineViewer],
+    [fitFocusBounds],
   );
 
   const clearThroughlineFocus = useCallback(() => {
@@ -744,6 +739,50 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
     [fitFocusBounds, renderThroughlineViewer],
   );
 
+  // Arrow keys step through the focused throughline once a step is active
+  // (sidebar click or drawer open). Ignores typing targets and chords.
+  useEffect(() => {
+    if (focusedThroughlineId == null || focusedStepIndex == null || !throughlines) {
+      return;
+    }
+    const tl = throughlines.find((t) => t.id === focusedThroughlineId);
+    if (!tl || tl.steps.length === 0) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const el = e.target as HTMLElement | null;
+      if (
+        el &&
+        (el.tagName === 'INPUT' ||
+          el.tagName === 'TEXTAREA' ||
+          el.tagName === 'SELECT' ||
+          el.isContentEditable)
+      ) {
+        return;
+      }
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+
+      let next: number | null = null;
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        next = Math.min(tl.steps.length - 1, focusedStepIndex + 1);
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        next = Math.max(0, focusedStepIndex - 1);
+      } else {
+        return;
+      }
+      if (next === focusedStepIndex) return;
+      e.preventDefault();
+      focusThroughlineStep(tl, next);
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [
+    focusedThroughlineId,
+    focusedStepIndex,
+    throughlines,
+    focusThroughlineStep,
+  ]);
+
   const toggleThroughlineCollapsed = useCallback((tlId: string) => {
     setExpandedThroughlines((prev) => {
       const next = new Set(prev);
@@ -813,10 +852,6 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
       });
   }, [dispEdges, selectedFlowStepNos]);
 
-  const usedMechanisms = useMemo(() => {
-    return new Set(edgeLabels.map((l) => l.mechanism));
-  }, [edgeLabels]);
-
   // Unique source files across components → sidebar file trees.
   const treeFilePaths = treeFiles;
 
@@ -860,7 +895,9 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
 
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      {/* Sidebar: scrollable title/description on top, files or flows pinned to the bottom half */}
+      {/* Sidebar: scrollable title/description on top, files or flows pinned below.
+          The description hides by default so files/flows get the room; the
+          title-row toggle reveals it, and the lower panel yields back to 50%. */}
       {!hideSidebar && (title || description || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasThroughlines) && (
         <div
           style={{
@@ -875,7 +912,7 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
         >
           <div
             style={{
-              flex: 1,
+              flex: showDesc ? 1 : '0 0 auto',
               minHeight: 0,
               overflowY: 'auto',
               padding: '16px',
@@ -885,20 +922,54 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
             }}
           >
           {sidebarExtra}
-          {title && (
-            <h2
-              style={{
-                margin: 0,
-                fontSize: theme.fontSizes[2],
-                fontWeight: 600,
-                color: theme.colors.text,
-                fontFamily: theme.fonts.heading,
-              }}
-            >
-              {title}
-            </h2>
+          {(title || description) && (
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
+              {title && (
+                <h2
+                  style={{
+                    margin: 0,
+                    flex: 1,
+                    minWidth: 0,
+                    fontSize: theme.fontSizes[2],
+                    fontWeight: 600,
+                    color: theme.colors.text,
+                    fontFamily: theme.fonts.monospace,
+                  }}
+                >
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <button
+                  type="button"
+                  aria-expanded={descriptionVisible}
+                  aria-label={descriptionVisible ? 'Hide description' : 'Show description'}
+                  title={descriptionVisible ? 'Hide description' : 'Show description'}
+                  onMouseEnter={() => setDescToggleHover(true)}
+                  onMouseLeave={() => setDescToggleHover(false)}
+                  onClick={() => setDescriptionVisible((v) => !v)}
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    width: 22,
+                    height: 22,
+                    padding: 0,
+                    border: 'none',
+                    borderRadius: 4,
+                    background: descToggleHover ? theme.colors.border : 'transparent',
+                    color: descToggleHover ? theme.colors.text : (theme.colors.textMuted ?? theme.colors.textSecondary),
+                    cursor: 'pointer',
+                    transition: 'background 120ms ease, color 120ms ease',
+                  }}
+                >
+                  {descriptionVisible ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                </button>
+              )}
+            </div>
           )}
-          {description && (
+          {description && descriptionVisible && (
             <div style={{ fontSize: theme.fontSizes[0], lineHeight: 1.5 }}>
               <IndustryMarkdownSlide
                 content={description}
@@ -918,7 +989,7 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
           {(treeFilePaths.length > 0 || hasThroughlines) && (
             <div
               style={{
-                height: '50%',
+                ...(showDesc ? { height: '50%' as const } : { flex: 1, minHeight: 0 }),
                 minHeight: 160,
                 flexShrink: 0,
                 borderTop: `1px solid ${theme.colors.border}`,
@@ -939,7 +1010,7 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
                     background: theme.colors.backgroundSecondary ?? theme.colors.background,
                   }}
                 >
-                  {(['files', 'flows'] as const).map((view) => (
+                  {(['flows', 'files'] as const).map((view) => (
                     <button
                       key={view}
                       type="button"
@@ -1142,37 +1213,9 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
         <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
         <Controls showZoom showFitView showInteractive />
       </ReactFlow>
-      {/* Legend button — top-left overlay on the canvas; opens the modal. */}
-      {showLegend !== false && usedMechanisms.size > 0 && (
-        <button
-          type="button"
-          onClick={() => setLegendOpen(true)}
-          style={{
-            position: 'absolute',
-            top: 10,
-            left: 10,
-            zIndex: 7,
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 6,
-            padding: '4px 10px',
-            fontSize: theme.fontSizes[0],
-            fontFamily: theme.fonts.body,
-            color: theme.colors.text,
-            background: theme.colors.backgroundSecondary ?? theme.colors.background,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: 6,
-            cursor: 'pointer',
-            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-          }}
-        >
-          <MapIcon size={13} />
-          Legend
-        </button>
-      )}
       {/* Graph title — non-interactive chip centered at the top of the canvas
-          (clear of the top-left legend button and top-right declaration
-          card). Lets graph-only embeds name the subsystem they show. */}
+          (clear of the top-right declaration card). Lets graph-only embeds
+          name the subsystem they show. */}
       {graphTitle && (
         <div
           style={{
@@ -1188,7 +1231,7 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
             padding: '6px 18px',
             fontSize: theme.fontSizes[3],
             fontWeight: 600,
-            fontFamily: theme.fonts.heading,
+            fontFamily: theme.fonts.monospace,
             color: theme.colors.text,
             background: theme.colors.backgroundSecondary ?? theme.colors.background,
             border: `1px solid ${theme.colors.border}`,
@@ -1201,8 +1244,7 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
         </div>
       )}
         {/* Selected-component declaration — floating card over the canvas
-            (top-right, clear of the top-left legend button). The graph never
-            moves for it. */}
+            (top-right). The graph never moves for it. */}
         {selected && (
           <div
             style={{
@@ -1229,11 +1271,6 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
           </div>
         )}
         </div>
-        <EdgeLegendModal
-          open={legendOpen}
-          mechanisms={usedMechanisms}
-          onClose={() => setLegendOpen(false)}
-        />
       <FileDrawer title={drawerTitle} onClose={() => setDrawerTarget(null)}>
         {drawerTarget?.kind === 'throughline' &&
         focusedThroughline &&
@@ -1370,6 +1407,15 @@ function ThroughlineFlow({
   const [headerHover, setHeaderHover] = useState(false);
   const [closeHover, setCloseHover] = useState(false);
   const [hoveredStep, setHoveredStep] = useState<number | null>(null);
+  const stepButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Keep DOM focus on the active step so the browser focus ring (and
+  // subsequent arrow keys) follow arrow navigation, not the originally
+  // clicked button.
+  useEffect(() => {
+    if (active?.stepIndex == null) return;
+    stepButtonRefs.current[active.stepIndex]?.focus({ preventScroll: true });
+  }, [active?.stepIndex]);
 
   return (
     <div style={{ margin: '4px 0', borderRadius: 8 }}>
@@ -1467,6 +1513,9 @@ function ThroughlineFlow({
             return (
               <button
                 key={`${step.edgeId}-${i}`}
+                ref={(el) => {
+                  stepButtonRefs.current[i] = el;
+                }}
                 type="button"
                 onMouseEnter={() => setHoveredStep(i)}
                 onMouseLeave={() => setHoveredStep(null)}
@@ -1480,6 +1529,7 @@ function ThroughlineFlow({
                   textAlign: 'left',
                   borderRadius: 6,
                   border: 'none',
+                  outline: 'none',
                   background: stepActive || hoveredStep === i ? hoverBg : 'transparent',
                   cursor: 'pointer',
                   transition: 'background 120ms ease',

package/src/subsystem/model.test.ts

@@ -86,12 +86,12 @@ describe('subsystem graph model', () => {
   });
 
   test('deriveNameFromSymbol is consistent per kind', () => {
-    // brace-bodied constructs wear {}; module uses the symbol as-is.
-    expect(deriveNameFromSymbol('SessionReader', 'class')).toBe('SessionReader {}');
+    // brace-bodied constructs wear {}; classes render bare; module uses the symbol as-is.
+    expect(deriveNameFromSymbol('SessionReader', 'class')).toBe('SessionReader');
     expect(deriveNameFromSymbol('SessionRecord', 'type_alias')).toBe('SessionRecord {}');
     expect(deriveNameFromSymbol('transcript', 'module')).toBe('transcript');
-    // falls back to existing name when no symbol (still brace-decorated).
-    expect(deriveNameFromSymbol(undefined, 'class', 'SessionReader')).toBe('SessionReader {}');
+    // falls back to existing name when no symbol (class stays bare).
+    expect(deriveNameFromSymbol(undefined, 'class', 'SessionReader')).toBe('SessionReader');
     expect(deriveNameFromSymbol('', 'external', 'trail-viewer-host')).toBe('trail-viewer-host');
   });
 
@@ -104,7 +104,7 @@ describe('subsystem graph model', () => {
     // data-shaped constructs stay bare
     expect(deriveNameFromSymbol('ROOT', 'store')).toBe('ROOT');
     // brace bodies don't double up
-    expect(deriveNameFromSymbol('Foo {}', 'class')).toBe('Foo {}');
+    expect(deriveNameFromSymbol('Foo {}', 'interface')).toBe('Foo {}');
   });
 
   test('deriveNameFromSymbol uses JSX decoration for component stereotype', () => {

package/src/subsystem/model.ts

@@ -269,8 +269,10 @@ export function deriveNameFromSymbol(
 
   // Decorations = what the drill-down shows. Framework stereotypes can override
   // the language decoration (a React component wears `<>` instead of `()`).
-  // Executable constructs wear `()`; brace-bodied constructs wear ` {}`.
-  // Everything else (store, module, external) renders bare.
+  // Executable constructs wear `()`; brace-bodied constructs (interface,
+  // type_alias, enum) wear ` {}`. Classes render bare — the construct badge
+  // already says "class".
+  // Everything else (class, store, module, external) renders bare.
   if (stereotype === 'component' && !name.startsWith('<')) {
     return `<${name}>`;
   }
@@ -278,8 +280,7 @@ export function deriveNameFromSymbol(
     name = `${name}()`;
   }
   if (
-    (construct === 'class' ||
-      construct === 'interface' ||
+    (construct === 'interface' ||
       construct === 'type_alias' ||
       construct === 'enum') &&
     !name.endsWith('{}')
@@ -447,6 +448,30 @@ export const MECHANISM_STYLE: Record<SubsystemEdgeMechanism, 'solid' | 'dashed'
   'registers-into': 'dashed',
 };
 
+/** Mechanism → [description, verifiable-with-graphify]. Drives the "not
+ *  directly verifiable" styling of edge labels. */
+export const MECHANISM_DESCRIPTIONS: [SubsystemEdgeMechanism, string, boolean][] = [
+  ['imports', 'import statement (code-level dependency)', true],
+  ['imports_from', 'imported by (reverse dependency)', true],
+  ['re_exports', 're-exports symbols from', true],
+  ['defines', 'defines / declares symbol', true],
+  ['calls', 'function/method call (call graph edge)', true],
+  ['extends', 'class inheritance', true],
+  ['inherits', 'class inheritance', true],
+  ['implements', 'implements interface / protocol', true],
+  ['mixes_in', 'applies mixin', true],
+  ['uses', 'general dependency (import, call, or reference)', false],
+  ['method', 'structural: has method / member', true],
+  ['references', 'type / symbol reference (not a call)', true],
+  ['contains', 'structural: contains / encapsulates', true],
+  ['feeds', 'data flow: output feeds into input', false],
+  ['produces', 'data flow: produces / outputs', false],
+  ['writes', 'state access: mutates retained state', true],
+  ['reads', 'state access: reads retained state', true],
+  ['watches', 'observes retained state without owning it', false],
+  ['registers-into', 'registration pattern', false],
+];
+
 /** Package color palette (derived deterministically from the package name). */
 export function packageColor(name: string): string {
   const palette = [

package/src/components/GraphRenderer.test.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { GraphRenderer } from './GraphRenderer';
-import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core';
-
-describe('GraphRenderer', () => {
-  const testConfig: GraphConfiguration = {
-    metadata: {
-      name: 'Test Graph',
-      version: '1.0.0',
-    },
-    nodeTypes: {
-      user: {
-        shape: 'circle',
-        color: '#4CAF50',
-        dataSchema: {
-          userId: { type: 'string', required: true },
-        },
-      },
-    },
-    edgeTypes: {
-      connection: {
-        style: 'solid',
-        directed: true,
-      },
-    },
-    allowedConnections: [{ from: 'user', to: 'user', via: 'connection' }],
-  };
-
-  const testNodes: NodeState[] = [
-    {
-      id: 'user-1',
-      type: 'user',
-      data: { userId: 'alice' },
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    },
-    {
-      id: 'user-2',
-      type: 'user',
-      data: { userId: 'bob' },
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    },
-  ];
-
-  const testEdges: EdgeState[] = [
-    {
-      id: 'conn-1',
-      type: 'connection',
-      from: 'user-1',
-      to: 'user-2',
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    },
-  ];
-
-  it('should render without crashing', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Graph Renderer/i)).toBeDefined();
-  });
-
-  it('should display configuration name', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Test Graph/i)).toBeDefined();
-  });
-
-  it('should display node count', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Nodes: 2/i)).toBeDefined();
-  });
-
-  it('should display edge count', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Edges: 1/i)).toBeDefined();
-  });
-
-  it('should render with empty nodes and edges', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={[]} edges={[]} />);
-
-    expect(screen.getByText(/Nodes: 0/i)).toBeDefined();
-    expect(screen.getByText(/Edges: 0/i)).toBeDefined();
-  });
-
-  it('should apply custom className', () => {
-    const { container } = render(
-      <GraphRenderer
-        configuration={testConfig}
-        nodes={testNodes}
-        edges={testEdges}
-        className="custom-class"
-      />
-    );
-
-    const element = container.querySelector('.custom-class');
-    expect(element).toBeDefined();
-  });
-
-  it('should apply custom width and height', () => {
-    const { container } = render(
-      <GraphRenderer
-        configuration={testConfig}
-        nodes={testNodes}
-        edges={testEdges}
-        width="500px"
-        height="400px"
-      />
-    );
-
-    const element = container.querySelector('div');
-    expect(element?.style.width).toBe('500px');
-    expect(element?.style.height).toBe('400px');
-  });
-});