@newlogic-digital/cli 1.5.0-next.5 → 1.5.0-next.6

package/index.mjs

@@ -4,15 +4,12 @@ import init from './src/commands/init/index.mjs'
 import cms from './src/commands/cms/index.mjs'
 import blocks from './src/commands/blocks/index.mjs'
 import skills from './src/commands/skills/index.mjs'
+import { parseCommandArgs } from './src/cli/args.mjs'
 import { styleText } from 'node:util'
 import { version, name } from './src/utils.mjs'
 
 const knownCommands = ['init', 'cms', 'blocks', 'skills']
 
-function normalizeOptionName(name) {
-  return name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
-}
-
 function getLevenshteinDistance(left, right) {
   const distances = Array.from({ length: left.length + 1 }, () => Array(right.length + 1).fill(0))
 
@@ -73,51 +70,6 @@ function printUnknownCommand(command) {
   console.log(lines.join('\n'))
 }
 
-function parseCommandArgs(args) {
-  const positionals = []
-  const options = {}
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]
-
-    if (arg === '-y') {
-      options.y = true
-      continue
-    }
-
-    if (!arg.startsWith('--')) {
-      positionals.push(arg)
-      continue
-    }
-
-    if (arg.startsWith('--no-')) {
-      options[normalizeOptionName(arg.slice(5))] = false
-      continue
-    }
-
-    if (arg.includes('=')) {
-      const splitIndex = arg.indexOf('=')
-      const key = normalizeOptionName(arg.slice(2, splitIndex))
-      const value = arg.slice(splitIndex + 1)
-
-      options[key] = value || true
-      continue
-    }
-
-    const key = normalizeOptionName(arg.slice(2))
-    const nextArg = args[i + 1]
-
-    if (nextArg && !nextArg.startsWith('-')) {
-      options[key] = nextArg
-      i++
-      continue
-    }
-
-    options[key] = true
-  }
-
-  return { positionals, options }
-}
 
 const rawArgs = process.argv.slice(2)
 const command = rawArgs[0]
@@ -150,12 +102,13 @@ if (!command) {
   
     -- blocks --
     ${styleText('green', 'newlogic blocks list')} - Lists all available installable blocks with descriptions
-    ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', '<name[@variant]...>')} - Installs one or more blocks by kebab-case or PascalCase name
+    ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', '<name[@variant]...>')} ${styleText('cyan', '[--target=<ui|cms>]')} - Installs one or more blocks by kebab-case or PascalCase name
     ${styleText('green', 'newlogic blocks remove')} ${styleText('yellow', '<name...>')} - Removes one or more blocks and orphaned dependencies
     ${styleText('green', 'newlogic blocks update')} - Reinstalls all configured blocks from ${styleText('yellow', 'newlogic.config.json')}
     ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'about-accordion')}
     ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'AboutAccordion')}
     ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'header-nav-left@stimulus')}
+    ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'header-nav-left contact-info-card')} ${styleText('cyan', '--target=ui')}
     ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'header-nav-left contact-info-card hero-floating-text')}
     ${styleText('green', 'newlogic blocks remove')} ${styleText('yellow', 'about-accordion')}
     ${styleText('green', 'newlogic blocks remove')} ${styleText('yellow', 'header-nav-left hero-floating-text')}
@@ -185,11 +138,11 @@ if (command === 'cms') {
 }
 
 if (command === 'blocks') {
-  const { positionals } = parseCommandArgs(rawArgs.slice(1))
+  const { positionals, options } = parseCommandArgs(rawArgs.slice(1))
   const action = positionals[0]
   const names = positionals.slice(1)
 
-  await blocks(action, names)
+  await blocks(action, names, options)
 }
 
 if (command === 'skills') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newlogic-digital/cli",
-  "version": "1.5.0-next.5",
+  "version": "1.5.0-next.6",
   "main": "index.mjs",
   "bin": {
     "newlogic-cli": "index.mjs",

package/skills/newlogic-cli/SKILL.md

@@ -60,23 +60,41 @@ Notes:
 Use to manage installable blocks in a project root.
 
 - `newlogic blocks list`
-- `newlogic blocks add <name...>`
+- `newlogic blocks add <name[@variant]...> [--target=<ui|cms>]`
 - `newlogic blocks remove <name...>`
 - `newlogic blocks update`
 
 Notes:
 
 - `list` prints all installable blocks with short descriptions so the agent can discover valid names before making changes.
-- `add` accepts kebab-case or PascalCase block names.
-- Installed blocks are recorded in `newlogic.config.json`.
-- `update` reinstalls all configured blocks from `newlogic.config.json`.
+- `add` accepts kebab-case or PascalCase block names and optional `@variant`.
+- `--target` is a batch option for the whole `add` command. `newlogic blocks add blok-1@stimulus blok-2 --target=ui` applies `target: "ui"` to both root blocks.
+- Use `--target=ui` when you want to copy only the frontend block files into a project where the CMS part does not exist yet.
+- Use `--target=cms` when the project already has the UI frontend and UI block files, but is still missing the backend/CMS implementation for those blocks.
+- Installed blocks are recorded in `newlogic.config.json` as an object map keyed by block name.
+- `update` reinstalls all configured blocks from `newlogic.config.json`, including stored `variant` and `target`.
+- When a block metadata file rule defines `target`, only matching files are installed for that block config. Without `target`, all files are installed.
 - `add` and `remove` may modify files and install npm or composer dependencies.
 
+Current config format:
+
+```json
+{
+  "blocks": {
+    "about-horizontal": {
+      "variant": "stimulus",
+      "target": "ui"
+    },
+    "hero-floating-text": {}
+  }
+}
+```
+
 Recommended flow:
 
 1. Run `newlogic blocks list` to discover what blocks exist.
 2. Match the user request to one or more listed block names.
-3. Run `newlogic blocks add <name...>` only after the names are confirmed by the list output.
+3. Run `newlogic blocks add <name[@variant]...>` only after the names are confirmed by the list output.
 4. Use `remove` only when the user wants to delete blocks that are already installed in the current project.
 5. Use `update` when the goal is to reinstall everything already tracked in `newlogic.config.json`.
 

package/src/cli/args.mjs

@@ -0,0 +1,49 @@
+function normalizeOptionName(name) {
+  return name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
+export function parseCommandArgs(args) {
+  const positionals = []
+  const options = {}
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+
+    if (arg === '-y') {
+      options.y = true
+      continue
+    }
+
+    if (!arg.startsWith('--')) {
+      positionals.push(arg)
+      continue
+    }
+
+    if (arg.startsWith('--no-')) {
+      options[normalizeOptionName(arg.slice(5))] = false
+      continue
+    }
+
+    if (arg.includes('=')) {
+      const splitIndex = arg.indexOf('=')
+      const key = normalizeOptionName(arg.slice(2, splitIndex))
+      const value = arg.slice(splitIndex + 1)
+
+      options[key] = value || true
+      continue
+    }
+
+    const key = normalizeOptionName(arg.slice(2))
+    const nextArg = args[i + 1]
+
+    if (nextArg && !nextArg.startsWith('-')) {
+      options[key] = nextArg
+      i++
+      continue
+    }
+
+    options[key] = true
+  }
+
+  return { positionals, options }
+}

package/src/commands/blocks/index.mjs

@@ -134,7 +134,7 @@ function printBlocksUsage() {
     styleText(['white', 'bold'], 'Usage:'),
     '',
     `  ${styleText('green', 'newlogic blocks list')} - Lists all available blocks with descriptions`,
-    `  ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', '<name[@variant]...>')} - Adds one or more blocks by kebab-case or PascalCase name`,
+    `  ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', '<name[@variant]...>')} ${styleText('cyan', '[--target=<ui|cms>]')} - Adds one or more blocks by kebab-case or PascalCase name`,
     `  ${styleText('green', 'newlogic blocks remove')} ${styleText('yellow', '<name...>')} - Removes one or more blocks and orphaned dependencies`,
     `  ${styleText('green', 'newlogic blocks update')} - Reinstalls all configured blocks from ${styleText('yellow', 'newlogic.config.json')}`,
     '',
@@ -142,11 +142,12 @@ function printBlocksUsage() {
     '',
     `  ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'header-nav-left contact-info-card hero-floating-text')}`,
     `  ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'header-nav-left@stimulus')}`,
+    `  ${styleText('green', 'newlogic blocks add')} ${styleText('yellow', 'header-nav-left contact-info-card')} ${styleText('cyan', '--target=ui')}`,
     `  ${styleText('green', 'newlogic blocks remove')} ${styleText('yellow', 'header-nav-left hero-floating-text')}`,
   ].join('\n'))
 }
 
-export default async function blocks(action, names = []) {
+export default async function blocks(action, names = [], options = {}) {
   if (!action || action === 'help' || action === '--help') {
     printBlocksUsage()
     return
@@ -167,7 +168,9 @@ export default async function blocks(action, names = []) {
       }
 
       const service = createBlocksService({ logger: createCliLogger() })
-      await service.addBlocks(names)
+      await service.addBlocks(names, {
+        target: options.target,
+      })
       return
     }
 

package/src/commands/blocks/service.mjs

@@ -8,6 +8,7 @@ import { createRemoteBlocksRepository } from './repository.mjs'
 
 const CONFIG_FILE_NAME = 'newlogic.config.json'
 const BLOCK_NAME_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+const BLOCK_TARGETS = new Set(['ui', 'cms'])
 
 function defaultLogger() {
   return {
@@ -83,27 +84,27 @@ function assertBlockName(name, label = 'block name') {
   }
 }
 
-function parseBlockSpecifier(rawValue, {
-  label = 'block name',
-  allowObject = false,
-} = {}) {
-  if (allowObject && rawValue && typeof rawValue === 'object' && !Array.isArray(rawValue)) {
-    const name = normalizeBlockName(rawValue.name)
-    const variant = rawValue.variant == null ? '' : `${rawValue.variant}`.trim()
+function normalizeBlockTarget(rawValue, label = 'block target') {
+  if (rawValue == null) {
+    return undefined
+  }
 
-    assertBlockName(name, 'configured block name')
+  const target = `${rawValue}`.trim().toLowerCase()
 
-    if (rawValue.variant != null && !variant) {
-      throw new Error(`Configured block "${name}" has an empty variant`)
-    }
+  if (!target) {
+    throw new Error(`Invalid ${label}: "${rawValue}"`)
+  }
 
-    return {
-      name,
-      variant: variant || undefined,
-      variantExplicit: rawValue.variant != null,
-    }
+  if (!BLOCK_TARGETS.has(target)) {
+    throw new Error(`Invalid ${label}: "${target}"`)
   }
 
+  return target
+}
+
+function parseBlockSpecifier(rawValue, {
+  label = 'block name',
+} = {}) {
   const value = `${rawValue ?? ''}`.trim()
 
   if (!value) {
@@ -124,7 +125,6 @@ function parseBlockSpecifier(rawValue, {
   return {
     name,
     variant: rawVariant || undefined,
-    variantExplicit: variantSeparator !== -1,
   }
 }
 
@@ -132,6 +132,54 @@ function toBlockKey(block) {
   return `${block.name}@${block.variant}`
 }
 
+function createTraversalKey(name, variant, target) {
+  return `${name}@${variant}#${target || '*'}`
+}
+
+function createConfiguredBlock(name, config = {}) {
+  const nextConfig = { ...config }
+
+  if (nextConfig.variant != null) {
+    const variant = `${nextConfig.variant}`.trim()
+
+    if (!variant) {
+      throw new Error(`Configured block "${name}" has an empty variant`)
+    }
+
+    nextConfig.variant = variant
+  }
+
+  if (nextConfig.target != null) {
+    nextConfig.target = normalizeBlockTarget(nextConfig.target, `configured block "${name}" target`)
+  }
+
+  return {
+    name,
+    variant: nextConfig.variant,
+    target: nextConfig.target,
+    config: nextConfig,
+  }
+}
+
+function filterRulesByTargets(rules = [], targets = []) {
+  const targetSet = new Set(targets)
+
+  if (targetSet.has(undefined)) {
+    return rules
+  }
+
+  return rules.filter(rule => rule.target && targetSet.has(rule.target))
+}
+
+function toManagedFileKey(rule) {
+  return [
+    rule.source,
+    rule.destination,
+    rule.parentDirectory || '',
+    rule.fileName,
+  ].join('\0')
+}
+
 function resolveTargetPath(projectRoot, rule) {
   const destinationRoot = resolveInside(projectRoot, rule.destination)
   const parentDirectory = rule.parentDirectory ? rule.parentDirectory.split('/').filter(Boolean) : []
@@ -171,7 +219,7 @@ function loadProjectConfig(projectRoot) {
   if (!fs.existsSync(configPath)) {
     return {
       configPath,
-      config: { blocks: [] },
+      config: { blocks: {} },
       blocks: [],
     }
   }
@@ -189,36 +237,42 @@ function loadProjectConfig(projectRoot) {
     throw new Error(`${CONFIG_FILE_NAME} must contain a JSON object`)
   }
 
-  const blocksRaw = config.blocks ?? []
+  const blocksRaw = config.blocks ?? {}
 
-  if (!Array.isArray(blocksRaw)) {
-    throw new Error(`"${CONFIG_FILE_NAME}" field "blocks" must be an array`)
+  if (!blocksRaw || typeof blocksRaw !== 'object' || Array.isArray(blocksRaw)) {
+    throw new Error(`"${CONFIG_FILE_NAME}" field "blocks" must be an object`)
   }
 
-  const blocks = blocksRaw.map((entry, index) => {
-    if (typeof entry !== 'string' && (!entry || typeof entry !== 'object' || Array.isArray(entry))) {
-      throw new Error(`Invalid block config entry at index ${index}`)
+  const blocks = Object.entries(blocksRaw).map(([rawName, rawConfig]) => {
+    const name = normalizeBlockName(rawName)
+
+    assertBlockName(name, 'configured block name')
+
+    if (!rawConfig || typeof rawConfig !== 'object' || Array.isArray(rawConfig)) {
+      throw new Error(`Configured block "${name}" must use an object value`)
     }
 
-    return parseBlockSpecifier(entry, {
-      label: `block config entry at index ${index}`,
-      allowObject: true,
-    })
+    return createConfiguredBlock(name, rawConfig)
   })
 
-  return { configPath, config, blocks: dedupeExplicitBlocks(blocks) }
+  return { configPath, config, blocks }
 }
 
 function saveProjectConfig(configPath, config, blocks) {
   const nextConfig = {
     ...config,
-    blocks: blocks.map(block => block.variantExplicit ? `${block.name}@${block.variant}` : block.name),
+    blocks: Object.fromEntries(
+      blocks.map(block => [
+        block.name,
+        { ...(block.config ?? {}) },
+      ]),
+    ),
   }
 
   fs.writeFileSync(configPath, `${JSON.stringify(nextConfig, null, 2)}\n`)
 }
 
-function dedupeExplicitBlocks(blocks) {
+function dedupeBlocks(blocks) {
   const byName = new Map()
 
   for (const block of blocks) {
@@ -239,7 +293,10 @@ function normalizeRequestedBlockNames(rawNames, label = 'block name') {
   return [...new Set(normalizedNames)]
 }
 
-function normalizeRequestedBlocks(rawNames, label = 'block name') {
+function normalizeRequestedBlocks(rawNames, {
+  label = 'block name',
+  target,
+} = {}) {
   if (!Array.isArray(rawNames) || rawNames.length === 0) {
     throw new Error(`Missing ${label}`)
   }
@@ -248,12 +305,25 @@ function normalizeRequestedBlocks(rawNames, label = 'block name') {
   const byName = new Map()
 
   for (const block of blocks) {
-    byName.set(block.name, block)
+    byName.set(block.name, createConfiguredBlock(block.name, {
+      ...(block.variant ? { variant: block.variant } : {}),
+      ...(target ? { target } : {}),
+    }))
   }
 
   return [...byName.values()]
 }
 
+function formatConfiguredBlock(block) {
+  let value = block.variant ? `${block.name}@${block.variant}` : block.name
+
+  if (block.target) {
+    value = `${value} --target=${block.target}`
+  }
+
+  return value
+}
+
 async function createMetaValidator(repository) {
   const schema = await repository.getSchema()
   const ajv = new Ajv2020({
@@ -335,11 +405,13 @@ export function createBlocksService({
   }
 
   async function resolveInstallPlan(rootBlocks) {
-    const visited = new Set()
+    const orderedKeys = []
+    const orderedKeySet = new Set()
     const resolving = new Set()
-    const plan = []
+    const propagated = new Set()
+    const itemsByKey = new Map()
 
-    async function visit(name, preferredVariant) {
+    async function visit(name, preferredVariant, target) {
       const normalizedName = normalizeBlockName(name)
       const meta = await getMeta(normalizedName)
       const variantName = preferredVariant || meta.install.defaultVariant
@@ -350,36 +422,61 @@ export function createBlocksService({
       }
 
       const key = toBlockKey({ name: normalizedName, variant: variantName })
+      const traversalKey = createTraversalKey(normalizedName, variantName, target)
 
-      if (visited.has(key)) {
+      if (propagated.has(traversalKey)) {
+        itemsByKey.get(key)?.targets.add(target)
         return
       }
 
-      if (resolving.has(key)) {
+      if (resolving.has(traversalKey)) {
         throw new Error(`Dependency cycle detected at "${key}"`)
       }
 
-      resolving.add(key)
+      let item = itemsByKey.get(key)
+
+      if (!item) {
+        item = {
+          name: normalizedName,
+          variant: variantName,
+          meta,
+          installVariant: variant,
+          targets: new Set(),
+        }
+        itemsByKey.set(key, item)
+      }
+
+      item.targets.add(target)
+      resolving.add(traversalKey)
 
       for (const dependency of variant.dependencies?.components ?? []) {
-        await visit(dependency.name, dependency.variant || variantName)
+        await visit(dependency.name, dependency.variant || variantName, target)
       }
 
-      resolving.delete(key)
-      visited.add(key)
-      plan.push({
-        name: normalizedName,
-        variant: variantName,
-        meta,
-        installVariant: variant,
-      })
+      resolving.delete(traversalKey)
+      propagated.add(traversalKey)
+
+      if (!orderedKeySet.has(key)) {
+        orderedKeySet.add(key)
+        orderedKeys.push(key)
+      }
     }
 
     for (const block of rootBlocks) {
-      await visit(block.name, block.variant)
+      await visit(block.name, block.variant, block.target)
     }
 
-    return plan
+    return orderedKeys.map((key) => {
+      const item = itemsByKey.get(key)
+      const targets = [...item.targets]
+
+      return {
+        ...item,
+        targets,
+        selectedFiles: filterRulesByTargets(item.installVariant.files ?? [], targets),
+        selectedSharedFiles: filterRulesByTargets(item.meta.install.sharedFiles ?? [], targets),
+      }
+    })
   }
 
   function summarizePlan(plan) {
@@ -389,7 +486,7 @@ export function createBlocksService({
     const warnings = []
 
     for (const item of plan) {
-      const sharedFiles = item.meta.install.sharedFiles ?? []
+      const sharedFiles = item.selectedSharedFiles
 
       if (sharedFiles.length > 0) {
         warnings.push(`Block "${item.name}" contains ${sharedFiles.length} sharedFiles entries. raw-only mode does not install them yet, skipping.`)
@@ -468,7 +565,7 @@ export function createBlocksService({
     for (const item of plan) {
       logger.info(`install ${item.name}@${item.variant}`)
 
-      for (const rule of item.installVariant.files ?? []) {
+      for (const rule of item.selectedFiles) {
         await installFile(item.name, rule)
       }
     }
@@ -498,7 +595,7 @@ export function createBlocksService({
     for (const item of [...items].reverse()) {
       logger.info(`remove ${item.name}@${item.variant}`)
 
-      for (const rule of item.installVariant.files ?? []) {
+      for (const rule of item.selectedFiles) {
         const targetPath = resolveTargetPath(projectRoot, rule)
         const relativeTargetPath = path.relative(projectRoot, targetPath) || path.basename(targetPath)
 
@@ -526,8 +623,8 @@ export function createBlocksService({
     return blocks
   }
 
-  async function addBlock(rawName) {
-    const result = await addBlocks([rawName])
+  async function addBlock(rawName, options = {}) {
+    const result = await addBlocks([rawName], options)
 
     return {
       block: result.blocks[0],
@@ -536,8 +633,9 @@ export function createBlocksService({
     }
   }
 
-  async function addBlocks(rawNames) {
-    const requestedBlocks = normalizeRequestedBlocks(rawNames)
+  async function addBlocks(rawNames, options = {}) {
+    const target = normalizeBlockTarget(options.target, 'block target')
+    const requestedBlocks = normalizeRequestedBlocks(rawNames, { target })
     const rootBlocks = []
 
     for (const requestedBlock of requestedBlocks) {
@@ -546,7 +644,8 @@ export function createBlocksService({
       rootBlocks.push({
         name: requestedBlock.name,
         variant: requestedBlock.variant,
-        variantExplicit: requestedBlock.variantExplicit,
+        target: requestedBlock.target,
+        config: { ...requestedBlock.config },
       })
 
       if (requestedBlock.variant && !meta.install?.variants?.[requestedBlock.variant]) {
@@ -559,13 +658,13 @@ export function createBlocksService({
     await installPlan(plan)
 
     const { configPath, config, blocks } = loadProjectConfig(projectRoot)
-    const nextBlocks = dedupeExplicitBlocks([
+    const nextBlocks = dedupeBlocks([
       ...blocks.filter(block => !requestedBlocks.some(requestedBlock => requestedBlock.name === block.name)),
       ...rootBlocks,
     ])
 
     saveProjectConfig(configPath, config, nextBlocks)
-    logger.info(`added ${rootBlocks.map(block => block.variantExplicit ? `${block.name}@${block.variant}` : block.name).join(', ')}`)
+    logger.info(`added ${rootBlocks.map(formatConfiguredBlock).join(', ')}`)
 
     return {
       blocks: rootBlocks,
@@ -596,8 +695,26 @@ export function createBlocksService({
     const beforePlan = await resolveInstallPlan(blocks)
     const remainingBlocks = blocks.filter(block => !names.includes(block.name))
     const afterPlan = remainingBlocks.length > 0 ? await resolveInstallPlan(remainingBlocks) : []
-    const afterKeys = new Set(afterPlan.map(toBlockKey))
-    const removedItems = beforePlan.filter(item => !afterKeys.has(toBlockKey(item)))
+    const afterByKey = new Map(afterPlan.map(item => [toBlockKey(item), item]))
+    const removedItems = beforePlan.flatMap((item) => {
+      const nextItem = afterByKey.get(toBlockKey(item))
+
+      if (!nextItem) {
+        return [item]
+      }
+
+      const afterFileKeys = new Set(nextItem.selectedFiles.map(toManagedFileKey))
+      const removedFiles = item.selectedFiles.filter(rule => !afterFileKeys.has(toManagedFileKey(rule)))
+
+      if (removedFiles.length === 0) {
+        return []
+      }
+
+      return [{
+        ...item,
+        selectedFiles: removedFiles,
+      }]
+    })
 
     await removePlanItems(removedItems)
     saveProjectConfig(configPath, config, remainingBlocks)

package/src/templates/components/article/ArticleGridHorizontal.latte

@@ -1,28 +0,0 @@
-<section class="x-article-grid-horizontal grid grid-cols-container gap-y-12 md:gap-y-16 py-20 md:py-24 lg:py-28">
-    <div class="flex items-end gap-x-10 gap-y-6 w-full justify-between max-md:flex-col">
-        <div class="flex flex-col w-full lg:flex-1/2 items-start max-w-161">
-            <div class="x-badge mb-1 accent-main-secondary muted">
-                Section title
-            </div>
-            <h2 class="x-heading lg:lg  mb-6">
-                Attention-grabbing medium length section headline
-            </h2>
-            <div class="x-text w-full">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Suspendisse varius enim in eros elementum tristique.
-                Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
-            </div>
-        </div>
-        <a href="#" class="x-button lg max-md:mr-auto">
-            View all
-            <svg class="me-auto size-5" aria-hidden="true">
-                <use href="#heroicons-mini/arrow-right"/>
-            </svg>
-        </a>
-    </div>
-    <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {foreach range(1,$control->itemsCount ?? 6) as $i}
-            {include './ArticleItem.latte', itemVariant => $control->itemVariant, showAuthor => $control->showAuthor, lastHidden => true, mutedBadge => $control->itemVariant !== 'filled'}
-        {/foreach}
-    </div>
-</section>

package/src/templates/components/article/ArticleItem.latte

@@ -1,59 +0,0 @@
-{default $lastHidden = false}
-{default $itemVariant = 'basic'}
-{default $mutedBadge = false}
-{default $showAuthor = false}
-
-<a
-    n:class="'x-article-item group flex flex-col', $lastHidden ? 'max-md:last:hidden lg:last:hidden'"
-    href="/article/detail.html"
->
-    <picture
-        n:class="
-            'x-image w-full before:skeleton aspect-310/207 md:aspect-310/207 lg:aspect-418/279 overflow-hidden',
-            $itemVariant === 'basic' ? 'rounded-2xl',
-            $itemVariant === 'outlined' ? 'rounded-t-2xl border-x border-t border-body-secondary',
-            $itemVariant === 'filled' ? 'rounded-t-2xl',
-        "
-    >
-        <source srcset="{=placeholder(345,431)}" media="(width < {$media->sm})">
-        <img
-            class="size-full object-cover group-hocus:scale-105 transition-transform"
-            src="{=placeholder(532,655)}"
-            alt=" " width="532" height="655" loading="lazy"
-        >
-    </picture>
-    <div
-        n:class="
-            'flex flex-col items-start pt-6 grow',
-            $itemVariant === 'outlined' ? 'rounded-b-2xl border-x border-b border-body-secondary px-6 pb-4',
-            $itemVariant === 'filled' ? 'bg-primary/5 px-6 pb-4 rounded-b-2xl',
-        "
-    >
-        <div class="flex gap-2 flex-wrap mb-3">
-            <div n:class="'x-badge sm', $mutedBadge ? 'muted' : ''">Article category</div>
-            <div class="x-badge sm  muted bg-transparent" n:if="!$showAuthor">5 min read</div>
-        </div>
-        <div class="x-heading xs mb-4 tracking-[-0.5px]">
-            Article title goes here
-        </div>
-        <div class="x-text text-main-secondary line-clamp-3 mb-4">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
-        </div>
-        <div class="grid grid-cols-[auto_1fr] mb-4 gap-x-4" n:if="$showAuthor">
-            <picture class="x-image before:skeleton size-12 rounded-full aspect-square shrink-0 row-span-2 overflow-hidden">
-                <img class="object-cover" src="{=placeholder(48,48)}" alt=" " width="48" height="48" loading="lazy">
-            </picture>
-            <span class="x-text sm font-medium self-end">Author Name</span>
-            <div class="flex gap-4">
-                <span class="x-text xs text-main-tertiary font-medium">04.12.2025</span>
-                <span class="x-text xs text-main-tertiary font-medium">5 min read</span>
-            </div>
-        </div>
-        <span class="x-button ghosted pl-1 mt-auto">
-            Read more
-            <svg class="me-auto size-5 group-hocus:translate-x-1 transition-transform" aria-hidden="true">
-                <use href="#heroicons-mini/arrow-right"/>
-            </svg>
-        </span>
-    </div>
-</a>

package/src/templates/components/header/HeaderNavLeft.latte

@@ -1,71 +0,0 @@
-<header class="x-header-nav-right h-(--x-header-height) grid grid-cols-container bg-body-primary sticky top-0 z-40">
-    <div class="flex items-center gap-1.5 md:gap-3">
-        <a href="#" class="shrink-0 max-lg:mr-auto lg:mr-7">
-            <img class="w-25 h-8" src="{placeholder(100,32)}" loading="lazy" alt="Logo">
-        </a>
-        <nav class="flex items-center flex-wrap justify-start gap-x-1 max-lg:hidden mr-auto">
-            <div class="x-popover trigger-hover group" n:foreach="range(1,4) as $item">
-                <a href="#" class="x-text x-link sm font-medium py-1 px-3 flex items-center gap-1.5">
-                    Menu item {$iterator->counter}
-                    <svg class="size-4 transition group-hocus:-scale-y-100" n:if="$iterator->last">
-                        <use href="#heroicons-solid/chevron-down" />
-                    </svg>
-                </a>
-                <div
-                    n:class="
-                        'x-nav-popover x-popover-content bottom-end border border-body-secondary shadow-lg min-w-55',
-                        'm-1.5 p-4 flex flex-col gap-1 before:-top-2.5 before:h-2.5'
-                    "
-                    n:if="$iterator->last"
-                >
-                    <a href="#" class="x-text x-link sm font-medium py-1 flex items-center gap-1.5" n:foreach="range(1,4) as $item">
-                        Menu item
-                    </a>
-                </div>
-            </div>
-        </nav>
-        <div class="x-popover trigger-focus group">
-            <button class="x-text x-link sm font-medium py-1 px-3 flex items-center gap-1.5" type="button" tabindex="0">
-                <img
-                    class="aspect-4/3 size-4"
-                    src="https://cdn.jsdelivr.net/npm/flag-icons@7.5.0/flags/1x1/gb.svg"
-                    alt="at"
-                    loading="lazy"
-                >
-                EN
-                <svg class="size-4 transition group-focus-within:-scale-y-100">
-                    <use href="#heroicons-solid/chevron-down" />
-                </svg>
-            </button>
-            <div class="x-popover-content bottom-end border border-body-secondary shadow-lg m-1.5 p-4 flex flex-col gap-1">
-                <a href="#" class="x-text x-link sm font-medium py-1 flex items-center gap-1.5" n:foreach="range(1,4) as $item">
-                    <img
-                        class="aspect-4/3 size-4"
-                        src="https://cdn.jsdelivr.net/npm/flag-icons@7.5.0/flags/1x1/gb.svg"
-                        alt="at"
-                        loading="lazy"
-                    >
-                    English
-                </a>
-            </div>
-        </div>
-        <a href="#" class="x-button sm max-md:hidden">
-            Call to action
-        </a>
-        <button
-            class="x-button square sm lg:hidden group swap"
-            type="button"
-            data-invoke-action="x-drawer#toggle"
-            data-invoke-target="#navDrawer"
-            aria-controls="navDrawer"
-            aria-expanded="false"
-        >
-            <svg class="size-5 shrink-0 not-group-aria-expanded:opacity-100 group-aria-expanded:rotate-45" aria-hidden="true">
-                <use href="#heroicons-solid/bars-3"></use>
-            </svg>
-            <svg class="size-5 shrink-0 not-group-aria-expanded:-rotate-45 group-aria-expanded:opacity-100" aria-hidden="true">
-                <use href="#heroicons-solid/x-mark"></use>
-            </svg>
-        </button>
-    </div>
-</header>