@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/flow/nodes/DataSourceNode.tsx

@@ -0,0 +1,179 @@
+// DataSourceNode (wave-4 spec): reads rows from a connected source and
+// summarises what it will read. The dialect is always written as text; a
+// host-registered mark is optional decoration.
+
+import { useId } from 'react'
+import { CircleCheck, CircleSlash } from 'lucide-react'
+import { Tag } from '../../index'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import type { FlowNode, LayoutDirection } from '../model/types'
+import { ConnectionPorts } from './ConnectionPorts'
+import { GraphNodeCard, NodeBadge, type CardDensity } from './GraphNodeCard'
+import { useKindPresentation } from './nodeChrome'
+import { NodeRunIndicator, useRunWords } from './NodeRunIndicator'
+import { SourceMarkSlot } from './sourceMarks'
+
+export interface DataSourceConfig {
+  sourceId: string
+  dialect?: string
+  table: string
+  selectedColumns?: string[]
+  filters?: unknown[]
+  limit?: number
+}
+
+export interface DataSourceNodeLabels {
+  kind: string
+  title: string
+  name: string
+  detail: string
+  connected: string
+  notConnected: string
+  sample: string
+  columns: string
+  filters: string
+  limit: string
+  notConfigured: string
+  remove: string
+}
+
+export const dataSourceNodeLabels = defineLabels<DataSourceNodeLabels>('dataSourceNode', {
+  en: {
+    kind: 'data source',
+    title: 'Data source',
+    name: 'data source: {title}, {dialect}, {table}',
+    detail: '{source} · {table}',
+    connected: 'connected',
+    notConnected: 'not connected',
+    sample: 'sample',
+    columns: '{count, plural, one {# column} other {# columns}}',
+    filters: '{count, plural, one {# filter} other {# filters}}',
+    limit: '{count, plural, one {up to # row} other {up to # rows}}',
+    notConfigured: 'Choose a connection and a table to read from.',
+    remove: 'remove {title}',
+  },
+  'pt-BR': {
+    kind: 'fonte de dados',
+    title: 'Fonte de dados',
+    name: 'fonte de dados: {title}, {dialect}, {table}',
+    detail: '{source} · {table}',
+    connected: 'conectada',
+    notConnected: 'não conectada',
+    sample: 'amostra',
+    columns: '{count, plural, one {# coluna} other {# colunas}}',
+    filters: '{count, plural, one {# filtro} other {# filtros}}',
+    limit: '{count, plural, one {até # linha} other {até # linhas}}',
+    notConfigured: 'Escolha uma conexão e uma tabela para ler.',
+    remove: 'remover {title}',
+  },
+  es: {
+    kind: 'fuente de datos',
+    title: 'Fuente de datos',
+    name: 'fuente de datos: {title}, {dialect}, {table}',
+    detail: '{source} · {table}',
+    connected: 'conectada',
+    notConnected: 'no conectada',
+    sample: 'muestra',
+    columns: '{count, plural, one {# columna} other {# columnas}}',
+    filters: '{count, plural, one {# filtro} other {# filtros}}',
+    limit: '{count, plural, one {hasta # fila} other {hasta # filas}}',
+    notConfigured: 'Elige una conexión y una tabla para leer.',
+    remove: 'quitar {title}',
+  },
+})
+export const defaultDataSourceNodeLabels = dataSourceNodeLabels.bundles.en
+
+/** Display name of a dialect: host list, else the key with its first letter capitalised. */
+export function dialectDisplayName(key: string | undefined, dialects: readonly { key: string; displayName: string }[] = []): string {
+  if (!key) return ''
+  const known = dialects.find((d) => d.key.toLowerCase() === key.toLowerCase())
+  return known?.displayName ?? key.charAt(0).toUpperCase() + key.slice(1)
+}
+
+/** Counts greater than zero, in the order columns, filters, limit. */
+export function dataSourceCounts(config: DataSourceConfig, l: DataSourceNodeLabels, locale: string): string[] {
+  const out: string[] = []
+  const cols = config.selectedColumns?.length ?? 0
+  const filters = config.filters?.length ?? 0
+  if (cols > 0) out.push(fill(l.columns, { count: cols }, locale))
+  if (filters > 0) out.push(fill(l.filters, { count: filters }, locale))
+  if (config.limit && config.limit > 0) out.push(fill(l.limit, { count: config.limit }, locale))
+  return out
+}
+
+export interface DataSourceNodeProps {
+  id: string
+  config: DataSourceConfig | null
+  source?: { name: string; connected?: boolean }
+  dialects?: { key: string; displayName: string }[]
+  label?: string
+  readOnly?: boolean
+  density?: CardDensity
+  onConfigure?: (id: string) => void
+  onRemove?: (id: string) => void
+  selected?: boolean
+  locked?: boolean
+  preview?: boolean
+  direction?: LayoutDirection
+  labels?: Partial<DataSourceNodeLabels>
+}
+
+export function DataSourceNode(props: DataSourceNodeProps) {
+  const { id, config, source, dialects = [], readOnly = false, density = 'detailed', onConfigure, onRemove, selected = false, locked = false, preview = false, direction = 'right' } = props
+  const l = useLabels(dataSourceNodeLabels, props.labels)
+  const { locale } = useFlowLocale()
+  const detailId = useId()
+  const node: FlowNode = { id, kind: 'datasource', position: { x: 0, y: 0 }, data: {} }
+  const k = useKindPresentation(node, direction)
+  const run = useRunWords(id)
+  const title = props.label ?? l.title
+  const configured = !!config && !!config.sourceId && !!config.table
+  const dialect = dialectDisplayName(config?.dialect, dialects)
+  const counts = config ? dataSourceCounts(config, l, locale) : []
+  const showConnection = !readOnly && source?.connected !== undefined
+  const connectionWord = source?.connected ? l.connected : l.notConnected
+  const canEdit = !preview && !locked
+  const name = configured ? fill(l.name, { title, dialect: dialect || '', table: config!.table }, locale) : undefined
+  const description = [showConnection ? connectionWord : null, readOnly ? l.sample : null, ...counts, run.words].filter(Boolean).join(', ')
+
+  return (
+    <GraphNodeCard
+      kind="datasource"
+      kindLabel={l.kind}
+      title={title}
+      {...(configured && density === 'detailed' ? { description: fill(l.detail, { source: source?.name ?? config!.sourceId, table: config!.table }, locale) } : {})}
+      icon={<SourceMarkSlot {...(config?.dialect ? { dialect: config.dialect } : {})} />}
+      tone={k.tone}
+      width="standard"
+      density={density}
+      selected={selected}
+      locked={locked}
+      runState={run.runState}
+      problem={configured ? false : l.notConfigured}
+      {...(name ? { accessibleName: name } : {})}
+      {...(description ? { stateWords: [description] } : {})}
+      {...(onConfigure && (canEdit || preview) ? { onActivate: () => onConfigure(id) } : {})}
+      {...(onRemove && canEdit ? { onDelete: () => onRemove(id) } : {})}
+      labels={{ remove: l.remove }}
+      badges={dialect && density === 'detailed' ? <NodeBadge>{dialect}</NodeBadge> : undefined}
+      meta={
+        configured ? (
+          <span className="ty-datasource-node__meta" id={detailId}>
+            {showConnection ? (
+              <span className="ty-datasource-node__connection" data-connected={source?.connected ? 'true' : 'false'}>
+                {source?.connected ? <CircleCheck aria-hidden="true" focusable="false" /> : <CircleSlash aria-hidden="true" focusable="false" />}
+                {connectionWord}
+              </span>
+            ) : null}
+            {readOnly ? <Tag size="small">{l.sample}</Tag> : null}
+            {counts.length ? <span className="ty-datasource-node__counts">{counts.join(' · ')}</span> : null}
+          </span>
+        ) : undefined
+      }
+      className="ty-flow-node ty-datasource-node"
+    >
+      <ConnectionPorts nodeId={id} nodeLabel={title} inputs={k.inputs} outputs={k.outputs} tone={k.tone} preview={preview} />
+      <NodeRunIndicator nodeId={id} kind="datasource" nodeLabel={title} />
+    </GraphNodeCard>
+  )
+}

package/src/flow/nodes/GenericNode.tsx

@@ -0,0 +1,114 @@
+// GenericNode: any node kind drawn from NodeKindCatalog data alone, so a kind
+// added on the backend appears without new front-end code. Duplicate, delete
+// and rename act on the shared editor state (one undo step each).
+
+import { Copy, Settings2, Trash2 } from 'lucide-react'
+import type { BranchTone } from '../catalog/kindCatalog'
+import { defineLabels, fill, useLabels } from '../internal/labels'
+import type { FlowNode, LayoutDirection, RunStatus } from '../model/types'
+import { useEditorLocked, useOptionalFlowEditorStore } from '../state/editorState'
+import { ConnectionPorts } from './ConnectionPorts'
+import { GraphNodeCard, type CardDensity } from './GraphNodeCard'
+import { NodeTools, PreviewStatusMark, useKindPresentation, usePreviewStatusWord, type NodeToolAction } from './nodeChrome'
+import { NodeRunIndicator, useRunWords } from './NodeRunIndicator'
+
+export interface GenericNodeLabels {
+  tools: string
+  configure: string
+  duplicate: string
+  remove: string
+}
+
+export const genericNodeLabels = defineLabels<GenericNodeLabels>('genericNode', {
+  en: { tools: 'Tools for {label}', configure: 'Configure {label}', duplicate: 'Duplicate {label}', remove: 'Delete {label}' },
+  'pt-BR': { tools: 'Ferramentas de {label}', configure: 'Configurar {label}', duplicate: 'Duplicar {label}', remove: 'Excluir {label}' },
+  es: { tools: 'Herramientas de {label}', configure: 'Configurar {label}', duplicate: 'Duplicar {label}', remove: 'Eliminar {label}' },
+})
+export const defaultGenericNodeLabels = genericNodeLabels.bundles.en
+
+export interface GenericNodeProps {
+  id: string
+  kind: string
+  /** Per-instance label; always wins over the catalog label. */
+  label?: string
+  density?: CardDensity
+  /** Replaces the kind's static outputs for this instance (one per configured case). */
+  dynamicOutputs?: { id: string; label: string; tone?: BranchTone }[]
+  onConfigure?: (id: string) => void
+  selected?: boolean
+  direction?: LayoutDirection
+  /** Extra node data (identity resolvers read it). */
+  data?: Record<string, unknown>
+  preview?: boolean
+  runStatus?: RunStatus
+  /** Used when no editor state is present. */
+  onDuplicate?: (id: string) => void
+  onRemove?: (id: string) => void
+  onRename?: (id: string, label: string) => void
+  locked?: boolean
+  labels?: Partial<GenericNodeLabels>
+}
+
+export function GenericNode(props: GenericNodeProps) {
+  const { id, kind, label, density = 'detailed', dynamicOutputs, onConfigure, selected = false, direction = 'right', data, preview = false, runStatus } = props
+  const l = useLabels(genericNodeLabels, props.labels)
+  const store = useOptionalFlowEditorStore()
+  const editorLocked = useEditorLocked()
+  const locked = !!props.locked || editorLocked
+  const node: FlowNode = { id, kind, position: { x: 0, y: 0 }, data: { ...(data ?? {}), ...(label !== undefined ? { label } : {}), ...(dynamicOutputs ? { dynamicOutputs } : {}) } }
+  const k = useKindPresentation(node, direction)
+  const run = useRunWords(id)
+  const previewWord = usePreviewStatusWord(runStatus)
+
+  const duplicate = () => {
+    if (store) store.actions.duplicate([id])
+    else props.onDuplicate?.(id)
+  }
+  const remove = () => {
+    if (store) store.actions.removeNodes([id])
+    else props.onRemove?.(id)
+  }
+  const rename = (next: string) => {
+    if (locked) return
+    if (store) {
+      store.actions.snapshot()
+      store.actions.setNodes((nodes) => nodes.map((n) => (n.id === id ? { ...n, data: { ...n.data, label: next } } : n)))
+    } else props.onRename?.(id, next)
+  }
+
+  const editable = !preview && !locked
+  const tools: NodeToolAction[] = editable
+    ? [
+        ...(onConfigure ? [{ id: 'configure', label: fill(l.configure, { label: k.title }), icon: Settings2, onPress: () => onConfigure(id) }] : []),
+        ...(store || props.onDuplicate ? [{ id: 'duplicate', label: fill(l.duplicate, { label: k.title }), icon: Copy, onPress: duplicate }] : []),
+        ...(store || props.onRemove ? [{ id: 'delete', label: fill(l.remove, { label: k.title }), icon: Trash2, onPress: remove, tone: 'danger' as const }] : []),
+      ]
+    : []
+
+  const extra = [run.words, previewWord].filter((w): w is string => !!w)
+  return (
+    <GraphNodeCard
+      kind={kind}
+      kindLabel={k.category ?? k.kindLabel}
+      title={k.title}
+      description={k.description ?? (density === 'detailed' ? k.kindLabel : undefined)}
+      icon={k.icon}
+      tone={k.tone}
+      width="standard"
+      density={density}
+      selected={selected}
+      locked={locked}
+      runState={run.runState}
+      dimmed={runStatus === 'unknown'}
+      stateWords={extra}
+      {...((editable || preview) && onConfigure ? { onActivate: () => onConfigure(id) } : {})}
+      {...(editable && (store || props.onRename) ? { onRename: rename } : {})}
+      meta={runStatus ? <PreviewStatusMark status={runStatus} /> : undefined}
+      className="ty-flow-node"
+    >
+      <NodeTools label={fill(l.tools, { label: k.title })} actions={tools} />
+      <ConnectionPorts nodeId={id} nodeLabel={k.title} inputs={k.inputs} outputs={k.outputs} tone={k.tone} preview={preview} />
+      <NodeRunIndicator nodeId={id} kind={kind} nodeLabel={k.title} />
+    </GraphNodeCard>
+  )
+}

package/src/flow/nodes/GraphNodeCard.css

@@ -0,0 +1,314 @@
+/* GraphNodeCard and the node frame states of NodeStateStyles (wave 4):
+   data attributes → tokens. Selection ring outside, run ring inside, focus
+   ring outside both (design direction §2.6, §3.13). */
+@layer tympan.components {
+  .ty-node-card {
+    --ty-node-ring: transparent;
+    --ty-node-run-ring: transparent;
+    --ty-node-border-style: solid;
+    --ty-node-border-width: 1px;
+    --ty-node-border-color: var(--ty-flow-node-border);
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+    inline-size: 100%;
+    min-block-size: 56px;
+    padding: var(--ty-space-3);
+    border: var(--ty-node-border-width) var(--ty-node-border-style) var(--ty-node-border-color);
+    border-radius: var(--ty-flow-node-radius);
+    background: var(--ty-flow-node-surface);
+    color: var(--ty-ink);
+    font-family: var(--ty-font-sans);
+    font-size: 13px;
+    line-height: 18px;
+    box-shadow:
+      inset 0 0 0 2px var(--ty-node-run-ring),
+      0 0 0 3px var(--ty-node-ring),
+      var(--ty-shadow-raised);
+    transition:
+      border-color var(--ty-dur-instant) var(--ty-ease),
+      box-shadow var(--ty-dur-instant) var(--ty-ease);
+  }
+  .ty-node-card[data-density='compact'] {
+    padding-block: var(--ty-space-2);
+  }
+  .ty-node-card:hover {
+    --ty-node-border-color: var(--ty-flow-node-border-hover);
+  }
+  .ty-node-card[data-selected='true'] {
+    --ty-node-ring: var(--ty-flow-ring-selected);
+  }
+  .ty-node-card[data-run-state='running'] {
+    --ty-node-run-ring: var(--ty-flow-ring-running);
+    animation: ty-node-running-pulse var(--ty-dur-pulse, 1.6s) ease-in-out infinite;
+  }
+  .ty-node-card[data-run-state='suspended'] {
+    --ty-node-run-ring: var(--ty-flow-ring-suspended);
+  }
+  .ty-node-card[data-run-state='succeeded'] {
+    --ty-node-run-ring: var(--ty-flow-ring-succeeded);
+  }
+  .ty-node-card[data-run-state='failed'] {
+    --ty-node-run-ring: var(--ty-flow-ring-failed);
+  }
+  .ty-node-card[data-dimmed='true'] > :not(.ty-node-run-indicator):not(.ty-node-card__state) {
+    opacity: 0.55;
+  }
+  .ty-node-card[data-problem='true'] {
+    --ty-node-border-style: dashed;
+    --ty-node-border-width: 1.5px;
+    --ty-node-border-color: var(--ty-warning);
+  }
+  .ty-node-card[data-connect-target='valid'] {
+    --ty-node-border-color: var(--ty-accent);
+    --ty-node-border-width: 2px;
+  }
+  .ty-node-card[data-connect-target='invalid'] {
+    --ty-node-border-color: var(--ty-danger);
+    --ty-node-border-style: dashed;
+    cursor: not-allowed;
+  }
+
+  /* Proof state line style (design direction §2.11) on provenance nodes. */
+  .ty-node-card[data-proof-state='proved'] {
+    --ty-node-border-style: solid;
+    --ty-node-border-width: 1.5px;
+    --ty-node-border-color: var(--ty-proof-proved);
+  }
+  .ty-node-card[data-proof-state='pending'] {
+    --ty-node-border-style: dashed;
+    --ty-node-border-width: 1.5px;
+    --ty-node-border-color: var(--ty-proof-pending);
+  }
+  .ty-node-card[data-proof-state='refuted'] {
+    --ty-node-border-style: double;
+    --ty-node-border-width: 3px;
+    --ty-node-border-color: var(--ty-proof-refuted);
+  }
+  .ty-node-card[data-proof-state='not-disclosed'] {
+    --ty-node-border-style: dotted;
+    --ty-node-border-width: 1.5px;
+    --ty-node-border-color: var(--ty-proof-not-disclosed);
+  }
+  .ty-node-card[data-proof-state='none'] {
+    --ty-node-border-style: solid;
+    --ty-node-border-color: var(--ty-line-strong);
+  }
+
+  .ty-node-card__header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ty-space-2);
+    min-inline-size: 0;
+  }
+  .ty-node-card__bubble {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-flow-tone, var(--ty-flow-tone-neutral));
+    color: var(--ty-flow-tone-ink, var(--ty-surface-solid));
+  }
+  .ty-node-card__bubble svg {
+    inline-size: 16px;
+    block-size: 16px;
+  }
+  .ty-node-card__titles {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 2px;
+    min-inline-size: 0;
+  }
+  /* Clamp by lines, never by characters, so CJK, Thai and Arabic wrap at
+     their own break opportunities; the full value stays in the accessible
+     name and the title attribute. */
+  .ty-node-card__title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    font-weight: var(--ty-font-weight-semibold);
+    color: var(--ty-ink);
+    overflow-wrap: anywhere;
+  }
+  .ty-node-card__description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    overflow-wrap: anywhere;
+  }
+
+  /* The title button is the card's one primary control, stretched over it. */
+  .ty-node-card__activator {
+    all: unset;
+    display: block;
+    min-inline-size: 0;
+    cursor: pointer;
+  }
+  .ty-node-card__activator::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: inherit;
+  }
+  .ty-node-card[data-interactive='true'] {
+    cursor: pointer;
+  }
+  .ty-node-card__activator[data-focus-visible]::after,
+  .ty-node-card[role='group']:focus-visible {
+    outline: var(--ty-focus-width, 2px) solid var(--ty-focus-ring, var(--ty-accent));
+    outline-offset: 6px;
+  }
+  .ty-node-card[role='group']:focus-visible {
+    outline-offset: 6px;
+  }
+  .ty-node-card__badges,
+  .ty-node-card__actions,
+  .ty-node-card__meta,
+  .ty-node-card__problem,
+  .ty-node-card__rename,
+  .ty-node-card .ty-port,
+  .ty-node-card [data-ty-above] {
+    position: relative;
+    z-index: 1;
+  }
+  .ty-node-card__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-1);
+    justify-content: flex-end;
+  }
+  .ty-node-card__actions {
+    display: flex;
+    gap: var(--ty-space-1);
+    margin-block: -6px;
+    margin-inline-end: -6px;
+  }
+  .ty-node-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ty-space-2);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-node-card__problem {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    margin: 0;
+    color: var(--ty-on-warning-soft, var(--ty-ink-2));
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-node-card__problem svg {
+    flex: none;
+    inline-size: 14px;
+    block-size: 14px;
+    color: var(--ty-warning);
+  }
+  .ty-node-card__rename-input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: 32px;
+    padding-inline: var(--ty-space-2);
+    border: 1px solid var(--ty-input);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-solid);
+    color: var(--ty-ink);
+    font: inherit;
+  }
+  .ty-node-card__rename-input:focus-visible {
+    outline: 2px solid var(--ty-accent);
+    outline-offset: 2px;
+  }
+
+  .ty-node-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-block-size: 20px;
+    padding-inline: 6px;
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-flow-tone-soft, var(--ty-surface-sunken));
+    color: var(--ty-flow-tone-text, var(--ty-ink-2));
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    font-weight: var(--ty-font-weight-semibold);
+    white-space: nowrap;
+  }
+  .ty-node-badge__icon svg {
+    inline-size: 12px;
+    block-size: 12px;
+  }
+
+  @keyframes ty-node-running-pulse {
+    50% {
+      box-shadow:
+        inset 0 0 0 2px color-mix(in oklab, var(--ty-node-run-ring) 45%, transparent),
+        0 0 0 3px var(--ty-node-ring),
+        var(--ty-shadow-raised);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-node-card {
+      transition: none;
+    }
+    .ty-node-card[data-run-state='running'] {
+      animation: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-node-card {
+      background: var(--ty-surface-solid);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-node-card {
+      border-color: CanvasText;
+      box-shadow: none;
+      background: Canvas;
+    }
+    .ty-node-card[data-selected='true'] {
+      outline: 3px solid Highlight;
+      outline-offset: 3px;
+    }
+    .ty-node-card[data-run-state='succeeded'] {
+      border: 2px solid CanvasText;
+    }
+    .ty-node-card[data-run-state='running'] {
+      border: 2px dashed CanvasText;
+    }
+    .ty-node-card[data-run-state='failed'] {
+      border: 4px double CanvasText;
+    }
+    .ty-node-card[data-problem='true'] {
+      border: 2px dashed CanvasText;
+    }
+    .ty-node-card__bubble,
+    .ty-node-badge {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+    .ty-node-card[data-dimmed='true'] > * {
+      opacity: 1;
+    }
+  }
+}