nextia 7.0.0 → 7.0.2

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "7.0.0",
+  "version": "7.0.2",
+  "license": "MIT",
+  "type": "module",
   "engines": {
     "node": ">22"
   },
-  "type": "module",
-  "license": "MIT",
   "author": {
     "name": "Sinuhe Maceda",
     "email": "sinuhe.dev@gmail.com",
@@ -23,7 +23,9 @@
   "bin": {
     "nextia": "src/bin.js"
   },
-  "main": "src/lib.js",
+  "exports": {
+    ".": "./src/lib/index.js"
+  },
   "scripts": {
     "clean": "rm -fr my-app node_modules package-lock.json .coverage out",
     "format": "biome format",
@@ -32,13 +34,7 @@
     "test": "vitest run",
     "test:name": "vitest run --testNamePattern",
     "test:silent": "vitest run --silent",
-    "test:coverage": "vitest run --silent --coverage",
-    "test:version": "./src/bin.js",
-    "test:my-app": "rm -fr my-app && src/bin.js my-app",
-    "test:my-app:exists": "src/bin.js my-app",
-    "test:my-page": "cd my-app && ../src/bin.js page my-page",
-    "test:my-component": "cd my-app && ../src/bin.js component MyComponent",
-    "test:my-container": "cd my-app && ../src/bin.js container MyContainer"
+    "test:coverage": "vitest run --silent --coverage"
   },
   "peerDependencies": {
     "react": "^19.2.3",
@@ -46,8 +42,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.2",
     "jsdom": "^29.0.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.2"
   }
 }

package/src/bin.js

@@ -190,7 +190,6 @@ async function createProject(name) {
     }
 
     await cp(templatePath, projectPath, { recursive: true })
-    await cp(`${__dirname}/../biome.json`, `${projectPath}/biome.json`)
 
     await Promise.all(
       ['env.dev', 'env.prod', 'env.test', 'gitignore'].map((fileName) =>
@@ -230,7 +229,7 @@ async function main() {
 
     default:
       if (ARG1) await createProject(ARG1)
-      else console.info(`v${pkg.version}\nnpm create nextia <ProjectName>`)
+      else console.info(`v${pkg.version}\nnextia <ProjectName>`)
       break
   }
 }

package/src/{lib.js → lib/fx.js}

@@ -10,31 +10,12 @@
 import { createContext, use, useReducer } from 'react'
 
 const LOGGER = import.meta.env.DEV && import.meta.env.PUBLIC_LOGGER !== 'false'
-const PagesContext = createContext()
+const PagesFx = createContext()
 
 /**
  * util
  */
 
-function css(...classNames) {
-  return classNames
-    .reduce((accumulator, currentValue) => {
-      if (typeof currentValue === 'string') {
-        accumulator.push(currentValue.trim())
-      } else if (
-        !Array.isArray(currentValue) &&
-        typeof currentValue === 'object'
-      ) {
-        for (const e in currentValue) {
-          if (currentValue[e]) accumulator.push(e.trim())
-        }
-      }
-      return accumulator
-    }, [])
-    .filter((e) => e)
-    .join(' ')
-}
-
 function values(state, payload, value) {
   const paths = payload.split('.')
 
@@ -166,7 +147,7 @@ const reducerLogger = (state, action) => {
  */
 
 function useFx(functions = { initialState: {} }) {
-  const pageContext = use(PagesContext)
+  const pagesFx = use(PagesFx)
   const { initialState } = functions
   const [state, dispatch] = useReducer(
     LOGGER ? reducerLogger : reducer,
@@ -177,7 +158,12 @@ function useFx(functions = { initialState: {} }) {
   const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce(
     (acc, e) => {
       acc[e] = (payload) =>
-        dispatch({ type: e, payload, initialState, isContext: !pageContext })
+        dispatch({
+          type: e,
+          payload,
+          initialState,
+          isContext: !pagesFx?.context
+        })
       return acc
     },
     {}
@@ -190,10 +176,8 @@ function useFx(functions = { initialState: {} }) {
         const actionsProps = {
           ...commonActions,
           state,
-          payload
-        }
-        if (pageContext) {
-          actionsProps.context = pageContext
+          payload,
+          context: pagesFx?.context
         }
 
         return functions[e](Object.freeze(actionsProps))
@@ -206,13 +190,14 @@ function useFx(functions = { initialState: {} }) {
   const props = {
     initialState,
     state,
-    fx: { ...commonActions, ...actions }
-  }
-  if (pageContext) {
-    props.context = pageContext
+    fx: { ...commonActions, ...actions },
+    //
+    context: pagesFx?.context,
+    icons: pagesFx?.icons,
+    i18n: pagesFx?.i18n
   }
 
   return Object.freeze(props)
 }
 
-export { css, PagesContext, useFx }
+export { PagesFx, useFx }

package/src/lib/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { PagesFx, useFx } from './fx.js'
+import { I18n, Icon, Link, Svg } from './ui.js'
+import {
+  css,
+  env,
+  startViewTransition,
+  useQueryString,
+  useResize
+} from './utils.js'
+
+export {
+  css,
+  env,
+  I18n,
+  Icon,
+  Link,
+  PagesFx,
+  Svg,
+  startViewTransition,
+  useFx,
+  useQueryString,
+  useResize
+}

package/src/lib/ui.js

@@ -0,0 +1,112 @@
+import { createElement, useEffect, useRef } from 'react'
+import { useFx } from './fx'
+import { css } from './utils'
+
+function Link({ children, href, value = {}, ...props }) {
+  href ??= window.location.hash.split('?')[0]
+  value = Object.keys(value).length
+    ? `?${new URLSearchParams(value).toString()}`
+    : ''
+
+  return createElement('a', { href: href + value, ...props }, children)
+}
+
+function I18n({ value, args = [] }) {
+  const { context, i18n } = useFx()
+
+  if (i18n) {
+    try {
+      let text = value.split('.').reduce((ac, el) => ac[el], i18n)
+      text = text[i18n.locales.indexOf(context.state.i18n.currentLocale)]
+
+      if (args) {
+        text = text.replace(
+          /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
+          (match, _literal, number) => args[number] || match
+        )
+      }
+
+      return text
+    } catch {
+      console.error(`Error in [il8n] => ${value}`)
+      return value
+    }
+  }
+}
+
+function Icon({
+  id,
+  className,
+  animate = false,
+  style,
+  width = '48',
+  height,
+  viewBox = '0 0 48 48',
+  fill = 'none',
+  color = 'currentColor',
+  stroke = 'currentColor',
+  strokeWidth = '2',
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round',
+  ...props
+}) {
+  const { icons } = useFx()
+  const ref = useRef()
+
+  useEffect(() => {
+    if (icons) {
+      const svg = new DOMParser()
+        .parseFromString(icons, 'image/svg+xml')
+        .documentElement.getElementById(id)
+
+      if (svg) {
+        ref.current.innerHTML = svg.innerHTML
+      }
+    }
+  }, [id, icons])
+
+  return createElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    ref,
+    id,
+    className: css({ 'nextia-animate-icon': animate }, className),
+    style,
+    width,
+    height: height ?? width,
+    viewBox,
+    fill,
+    color,
+    stroke,
+    strokeWidth,
+    strokeLinecap,
+    strokeLinejoin,
+    ...props
+  })
+}
+
+function Svg({ ref, src, width, height, ...props }) {
+  ref ??= useRef()
+
+  useEffect(() => {
+    const svg = new DOMParser().parseFromString(
+      src,
+      'image/svg+xml'
+    ).documentElement
+
+    for (const { name, value } of svg.attributes) {
+      if (name !== 'width' && name !== 'height')
+        ref.current.setAttribute(name, value)
+    }
+
+    ref.current.replaceChildren(...svg.children)
+  }, [src, ref])
+
+  return createElement('svg', {
+    ref,
+    width,
+    height: height ?? width,
+    ...props
+  })
+}
+
+export { I18n, Icon, Link, Svg }

package/src/lib/utils.js

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { flushSync } from 'react-dom'
+
+/**
+ * env
+ */
+
+const env = import.meta.env
+
+/**
+ * View Transition
+ */
+
+async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
+  if (!document.startViewTransition || env.PUBLIC_VIEW_TRANSITION === 'false')
+    return fun()
+
+  ref.style.viewTransitionName = animation
+  await document.startViewTransition(() => flushSync(fun)).finished
+  ref.style.viewTransitionName = ''
+}
+
+/**
+ * hooks
+ */
+
+function useQueryString() {
+  const getQueryString = useCallback(
+    () => ({
+      hash: window.location.hash.split('?')[0],
+      queryString: Object.fromEntries(
+        new URLSearchParams(window.location.hash.split('?')[1])
+      )
+    }),
+    []
+  )
+
+  const [queryString, setQueryString] = useState(getQueryString)
+
+  useEffect(() => {
+    const handlePopState = () => setQueryString(getQueryString())
+
+    window.addEventListener('popstate', handlePopState)
+    return () => {
+      window.removeEventListener('popstate', handlePopState)
+    }
+  }, [getQueryString])
+
+  return queryString
+}
+
+function useResize() {
+  const getResize = useCallback(
+    () => ({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }),
+    []
+  )
+
+  const [resize, setResize] = useState(getResize)
+
+  useEffect(() => {
+    const handleResize = () => setResize(getResize())
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [getResize])
+
+  return resize
+}
+
+/**
+ * util
+ */
+
+function css(...classNames) {
+  return classNames
+    .reduce((accumulator, currentValue) => {
+      if (typeof currentValue === 'string') {
+        accumulator.push(currentValue.trim())
+      } else if (
+        !Array.isArray(currentValue) &&
+        typeof currentValue === 'object'
+      ) {
+        for (const e in currentValue) {
+          if (currentValue[e]) accumulator.push(e.trim())
+        }
+      }
+      return accumulator
+    }, [])
+    .filter((e) => e)
+    .join(' ')
+}
+
+export { css, env, startViewTransition, useQueryString, useResize }

package/template/biome.json

@@ -0,0 +1,21 @@
+{
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "trailingCommas": "none"
+    }
+  },
+
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
+}

package/template/package.json

@@ -22,10 +22,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.2",
     "jsdom": "^29.0.1",
-    "vite": "^8.0.1",
-    "vitest": "^4.0.18"
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
   },
   "dependencies": {
     "nextia": "file:../",

package/template/src/assets/img/image.svg

@@ -0,0 +1,6 @@
+<svg width="256" height="256" viewBox="0 0 48 48" strokeWidth="1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+   <defs id="defs" />
+   <path id="background" d="m 6.9596e-8,0 h 50.155103930404003 v 48 h -50.155103930404003 z" fill="#f7df1e" />
+   <path id="label"
+      d="m 14.776102,40.11225 3.673125,-2.223 c 0.70875,1.256438 1.353375,2.319562 2.899688,2.319562 1.482186,0 2.416875,-0.57975 2.416875,-2.835 v -15.337125 h 4.510687 v 15.400875 c 0,4.671937 -2.738625,6.798562 -6.73425,6.798562 -3.608437,0 -5.703001,-1.868812 -6.766313,-4.124249 m 15.950625,-0.483 3.67275,-2.126438 c 0.966938,1.578938 2.223563,2.738813 4.446562,2.738813 1.869189,0 3.060938,-0.934501 3.060938,-2.223375 0,-1.5465 -1.224375,-2.094376 -3.286499,-2.99625 l -1.127439,-0.48375 c -3.254437,-1.385062 -5.413124,-3.125063 -5.413124,-6.798188 0,-3.38325 2.577562,-5.961 6.605249,-5.961 2.867626,0 4.929751,0.999001 6.411751,3.608813 l -3.51225,2.255625 c -0.773438,-1.385438 -1.610813,-1.933125 -2.899688,-1.933125 -1.321124,0 -2.158875,0.83775 -2.158875,1.933125 0,1.353187 0.837751,1.90125 2.770875,2.739 l 1.127625,0.483187 c 3.834375,1.643438 5.993063,3.318751 5.993063,7.088251 0,4.060124 -3.18975,6.283124 -7.475063,6.283124 -4.188562,0 -6.895125,-1.997625 -8.216062,-4.607625" />
+</svg>

package/template/src/components/Counter/index.jsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react'
 import './style.css'
-import { css } from 'nextia'
-import { startViewTransition } from 'utils'
+import { css, startViewTransition } from 'nextia'
 
 export default function Counter({
   name,

package/template/src/components/Message/index.jsx

@@ -1,4 +1,4 @@
-import { I18n } from 'components'
+import { I18n } from 'nextia'
 
 export default function Messages({ name, className, style }) {
   return (

package/template/src/components/index.js

@@ -1,10 +1,6 @@
 import Counter from './Counter'
 import Message from './Message'
 // ui
-import I18n from './ui/I18n'
-import Icon from './ui/Icon'
-import Link from './ui/Link'
-import Svg from './ui/Svg'
 import Translate from './ui/Translate'
 
-export { Counter, I18n, Icon, Link, Message, Svg, Translate }
+export { Counter, Message, Translate }

package/template/src/components/ui/Translate/index.jsx

@@ -1,13 +1,15 @@
-export default function UiTranslate({
-  value,
-  onChange = () => {},
-  className,
-  style
-}) {
+import { useFx } from 'nextia'
+
+export default function UiTranslate({ className, style }) {
+  const { context } = useFx()
+
+  const { currentLocale, locales } = context.state.i18n
+  const { changeI18n } = context.fx
+
   return (
     <article className={className} style={style}>
-      <select value={value.currentLocale} onChange={onChange}>
-        {value.locales.map((e) => (
+      <select value={currentLocale} onChange={changeI18n}>
+        {locales.map((e) => (
           <option key={e} value={e} className="m-2">
             {e}
           </option>

package/template/src/pages/env/index.jsx

@@ -1,6 +1,5 @@
-import { css, useFx } from 'nextia'
+import { css, env, useFx } from 'nextia'
 import { useEffect } from 'react'
-import { env } from 'utils'
 import functions from './functions'
 import './style.css'
 

package/template/src/pages/icons/index.jsx

@@ -1,20 +1,21 @@
-import { Icon, Svg } from 'components'
-import { css, useFx } from 'nextia'
+import { css, Icon, useFx } from 'nextia'
 import functions from './functions'
 import './style.css'
-import exitSvg from 'theme/icons/exit.svg?raw'
 
 export default function IconsPage() {
   const { state, fx } = useFx(functions)
 
   return (
     <section className={css('IconsPage', '')}>
-      <Icon id="globe" width="32" />
-      <Icon id="camera" width="32" />
-      <Icon id="video" width="32" />
-      <br />
-      <br />
-      <Svg src={exitSvg} width="32" />
+      <article>
+        <Icon id="globe" width="32" />
+        <Icon id="camera" width="32" />
+        <Icon id="video" width="32" />
+      </article>
+
+      <article>
+        <Icon id="exit" animate width="32" />
+      </article>
     </section>
   )
 }

package/template/src/pages/icons/style.css

@@ -1,4 +1,7 @@
 .IconsPage {
+  display: flex;
+  justify-content: space-around;
+
   svg {
     margin-right: 10px;
   }

package/template/src/pages/images/index.jsx

@@ -1,20 +1,25 @@
-import image from 'assets/img/image.jpg'
-import { css, useFx } from 'nextia'
+import image from 'assets/img/image.webp'
+import { css, Svg, useFx } from 'nextia'
 import functions from './functions'
 import './style.css'
+import imageSvg from 'assets/img/image.svg?raw'
 
 export default function ImagesPage() {
   const { state, fx } = useFx(functions)
 
   return (
     <section className={css('ImagesPage', '')}>
-      <br />
       <p>css-img</p>
       <div className="css-img" />
 
-      <br />
       <p>img</p>
-      <img src={image} alt="img" height={200} />
+      <img src={image} alt="img" width="64" />
+
+      <p>svg</p>
+      <Svg src={imageSvg} width="64" />
+
+      <p>svg+css</p>
+      <Svg className="svg-css" src={imageSvg} width="64" />
     </section>
   )
 }

package/template/src/pages/images/style.css

@@ -1,8 +1,27 @@
 .ImagesPage {
+  margin-left: 50px;
+
   .css-img {
-    background: url("assets/img/image.jpg") no-repeat;
-    height: 200px;
+    background: url("assets/img/image.webp") no-repeat;
+    height: 64px;
     background-repeat: no-repeat;
     background-size: contain;
   }
+
+  .svg-css {
+    #label {
+      animation: svg-css_arrow 2s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes svg-css_arrow {
+  0%,
+  100% {
+    transform: translateY(-2px);
+  }
+
+  50% {
+    transform: translateY(2px);
+  }
 }

package/template/src/pages/index.jsx

@@ -1,12 +1,22 @@
-import { I18n, Icon, Link, Translate } from 'components'
-import { PagesContext, useFx } from 'nextia'
+import i18nFile from 'assets/i18n'
+import { Translate } from 'components'
+import {
+  I18n,
+  Icon,
+  Link,
+  PagesFx,
+  startViewTransition,
+  useFx,
+  useQueryString,
+  useResize
+} from 'nextia'
 import { lazy, useEffect, useRef, useState } from 'react'
-import { startViewTransition, useQueryString, useResize } from 'utils'
+import iconsFile from 'theme/icons/icons.svg?raw'
 import functions from './functions.js'
 
 export default function Pages() {
-  const pagesContext = useFx(functions)
-  const { state, fx } = pagesContext
+  const pages = useFx(functions)
+  const { state, fx } = pages
 
   const [Page, setPage] = useState()
   const qs = useQueryString()
@@ -35,11 +45,11 @@ export default function Pages() {
   }, [qs.hash])
 
   return (
-    <PagesContext value={pagesContext}>
+    <PagesFx value={{ context: pages, icons: iconsFile, i18n: i18nFile }}>
       <header style={{ display: 'flex', gap: '20px' }}>
         <Icon id="globe" width="24" />
 
-        <Translate value={state.i18n} onChange={fx.changeI18n} />
+        <Translate />
 
         <I18n value="page.name" args={['Sinuhe', 'Maceda', 'Bouchan']} />
 
@@ -89,8 +99,8 @@ export default function Pages() {
         <Link href="#/translate" className="mr-2">
           /translate
         </Link>
-        <Link href="#/counter" className="mr-2">
-          /counter
+        <Link href="#/view-transition" className="mr-2">
+          /view-transition
         </Link>
         <Link href="#/images" className="mr-2">
           /images
@@ -101,14 +111,14 @@ export default function Pages() {
         <Link href="#/resize" className="mr-2">
           /resize
         </Link>
-        <Link href="#/no" className="mr-2">
-          /no
+        <Link href="#/dashboard" className="mr-2">
+          /not-found
         </Link>
       </aside>
 
       <main ref={ref} className="m-2">
         {Page && <Page qs={qs.queryString} resize={resize} />}
       </main>
-    </PagesContext>
+    </PagesFx>
   )
 }

package/template/src/pages/search-params/index.jsx

@@ -1,5 +1,4 @@
-import { Link } from 'components'
-import { css, useFx } from 'nextia'
+import { css, Link, useFx } from 'nextia'
 import { useEffect } from 'react'
 import functions from './functions'
 import './style.css'

package/template/src/pages/translate/index.jsx

@@ -1,7 +1,7 @@
-import { css, useFx } from 'nextia'
+import { css, I18n, useFx } from 'nextia'
 import functions from './functions'
 import './style.css'
-import { I18n, Message } from 'components'
+import { Message } from 'components'
 
 export default function TranslatePage() {
   const { state, fx } = useFx(functions)

package/template/src/pages/{counter → view-transition}/index.jsx

@@ -3,33 +3,12 @@ import { css, useFx } from 'nextia'
 import functions from './functions'
 import './style.css'
 
-export default function CounterPage() {
+export default function ViewTransitionPage() {
   const { state, fx } = useFx(functions)
 
   return (
-    <section
-      className={css(
-        'CounterPage',
-        '',
-        'class-test',
-        'class-test',
-        {},
-        null,
-        true,
-        false,
-        [],
-        { 'css-false': false },
-        undefined,
-        { 'css-true': true },
-        { 'css-true': true }
-      )}
-    >
+    <section className={css('ViewTransitionPage')}>
       Counters
-      <div className={css(null)} />
-      <div className={css(undefined)} />
-      <div className={css([])} />
-      <div className={css({})} />
-      <div className={css()} />
       <Counter
         value={state.count}
         animation="count"

package/template/src/pages/view-transition/style.css

@@ -0,0 +1,2 @@
+.ViewTransitionPage {
+}

package/template/src/services/api.js

@@ -1,4 +1,4 @@
-import { env } from 'utils'
+import { env } from 'nextia'
 import { DELETE, GET, POST, PUT } from './http'
 
 const API = env.PUBLIC_API

package/template/src/theme/icons/icons.svg

@@ -16,12 +16,11 @@
    inkscape:export-filename="icons.svg"
    inkscape:export-xdpi="96"
    inkscape:export-ydpi="96"
+   aria-hidden="true" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <title
-     id="title">icons</title>
   <sodipodi:namedview
      id="namedview"
      pagecolor="#505050"
@@ -96,10 +95,10 @@
      style="display:none"
      sodipodi:insensitive="true">
     <path
-       id="solid"
+       id="background"
        d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
     <path
-       id="animation"
+       id="ring"
        d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
     <g
        id="arrow">

package/template/src/theme/icons/index.css

@@ -0,0 +1,55 @@
+#exit.nextia-animate-icon {
+  transition: transform 200ms linear;
+
+  #ring {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 1;
+    transition:
+      stroke-dashoffset 400ms linear,
+      stroke-dasharray 400ms linear;
+  }
+
+  #arrow {
+    animation: exit_arrow 2s ease-in-out infinite;
+
+    #right,
+    #left {
+      display: none;
+    }
+  }
+
+  &:hover {
+    transform: rotate(-90deg);
+
+    #ring {
+      stroke-dasharray: 200, 1;
+      stroke: var(--primary-color);
+      stroke-width: 4px;
+    }
+
+    #arrow {
+      transform: translateY(2px);
+      stroke: var(--primary-color);
+
+      line {
+        stroke-width: 4px;
+      }
+
+      #right,
+      #left {
+        display: block;
+      }
+    }
+  }
+}
+
+@keyframes exit_arrow {
+  0%,
+  100% {
+    transform: translateY(2px);
+  }
+
+  50% {
+    transform: translateY(6px);
+  }
+}

package/template/src/theme/index.css

@@ -1,6 +1,6 @@
-@import "./util.css";
 @import "./fonts/index.css";
-@import "./animations.css";
+@import "./icons/index.css";
+@import "./utils/index.css";
 
 :root {
   --primary-color: #344188;

package/template/src/theme/{util.css → utils/index.css}

@@ -1,3 +1,5 @@
+@import "./view-transition.css";
+
 /**
  * Scrollbar
  */

package/template/src/utils/index.js

@@ -1,19 +1,5 @@
-import { flushSync } from 'react-dom'
-import { useQueryString, useResize } from './hooks'
-
-const env = import.meta.env
-
-async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
-  if (!document.startViewTransition || env.PUBLIC_VIEW_TRANSITION === 'false')
-    return fun()
-
-  ref.style.viewTransitionName = animation
-  await document.startViewTransition(() => flushSync(fun)).finished
-  ref.style.viewTransitionName = ''
-}
-
 function sum(a, b) {
   return a + b
 }
 
-export { env, startViewTransition, sum, useQueryString, useResize }
+export { sum }

package/template/test/index.test.js

@@ -1,8 +1,7 @@
-import { env, sum } from 'utils'
+import { env } from 'nextia'
+import { sum } from 'utils'
 import { test } from 'vitest'
 
-test('test', () => {})
-
 test('sumTest', () => {
   console.info(sum(1, 20))
 })

package/template/src/components/ui/I18n/index.jsx

@@ -1,23 +0,0 @@
-import i18nFile from 'assets/i18n'
-import { useFx } from 'nextia'
-
-export default function UiI18n({ value, args = [] }) {
-  const { context } = useFx()
-
-  try {
-    let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
-    text = text[i18nFile.locales.indexOf(context.state.i18n.currentLocale)]
-
-    if (args) {
-      text = text.replace(
-        /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
-        (match, _literal, number) => args[number] || match
-      )
-    }
-
-    return text
-  } catch {
-    console.error(`Error in [il8n] => ${value}`)
-    return value
-  }
-}

package/template/src/components/ui/Icon/index.jsx

@@ -1,50 +0,0 @@
-import { useEffect, useRef } from 'react'
-import icons from 'theme/icons/icons.svg?raw'
-
-export default function UiIcon({
-  id,
-  className,
-  style,
-  width = '48',
-  height,
-  viewBox = '0 0 48 48',
-  fill = 'none',
-  color = 'currentColor',
-  stroke = 'currentColor',
-  strokeWidth = '2',
-  strokeLinecap = 'round',
-  strokeLinejoin = 'round',
-  ...props
-}) {
-  const ref = useRef()
-
-  useEffect(() => {
-    const svg = new DOMParser()
-      .parseFromString(icons, 'image/svg+xml')
-      .documentElement.getElementById(id)
-
-    if (svg) {
-      ref.current.innerHTML = svg.innerHTML
-    }
-  }, [id])
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      ref={ref}
-      id={id}
-      className={className}
-      style={style}
-      width={width}
-      height={height}
-      viewBox={viewBox}
-      fill={fill}
-      color={color}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeLinecap={strokeLinecap}
-      strokeLinejoin={strokeLinejoin}
-      {...props}
-    />
-  )
-}

package/template/src/components/ui/Link/index.jsx

@@ -1,12 +0,0 @@
-export default function UiLink({ children, href, value = {}, ...props }) {
-  href ??= window.location.hash.split('?')[0]
-  value = Object.keys(value).length
-    ? `?${new URLSearchParams(value).toString()}`
-    : ''
-
-  return (
-    <a href={href + value} {...props}>
-      {children}
-    </a>
-  )
-}

package/template/src/components/ui/Svg/index.jsx

@@ -1,54 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export default function UiSvg({
-  src,
-  width = '48',
-  height,
-  viewBox = '0 0 48 48',
-  fill = 'none',
-  color = 'currentColor',
-  stroke = 'currentColor',
-  strokeWidth = '2',
-  strokeLinecap = 'round',
-  strokeLinejoin = 'round'
-}) {
-  const ref = useRef()
-
-  useEffect(() => {
-    if (!ref.current) return
-
-    const svg = new DOMParser()
-      .parseFromString(src, 'image/svg+xml')
-      .querySelector('svg')
-
-    svg.setAttribute('width', width)
-    svg.setAttribute('height', height ?? width)
-    svg.setAttribute('viewBox', viewBox)
-    svg.setAttribute('fill', fill)
-    svg.setAttribute('color', color)
-    svg.setAttribute('stroke', stroke)
-    svg.setAttribute('stroke-width', strokeWidth)
-    svg.setAttribute('stroke-linecap', strokeLinecap)
-    svg.setAttribute('stroke-linejoin', strokeLinejoin)
-
-    const shadow =
-      ref.current.shadowRoot ?? ref.current.attachShadow({ mode: 'open' })
-    shadow.innerHTML = svg.outerHTML
-
-    ref.current.style.width = `${width}px`
-    ref.current.style.height = `${height ?? width}px`
-  }, [
-    src,
-    width,
-    height,
-    viewBox,
-    fill,
-    color,
-    stroke,
-    strokeWidth,
-    strokeLinecap,
-    strokeLinejoin
-  ])
-
-  return <div ref={ref} />
-}

package/template/src/pages/counter/style.css

@@ -1,2 +0,0 @@
-.CounterPage {
-}

package/template/src/theme/icons/exit.svg

@@ -1,69 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="256" height="256" viewBox="0 0 48 48" fill="none"
-   color="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-
-   <style type="text/css">
-      svg {
-         transition: transform 200ms linear;
-
-         #ani {
-            transition:
-               stroke-dashoffset 400ms linear,
-               stroke-dasharray 400ms linear;
-            stroke: var(--primary-color);
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 1;
-         }
-
-         #arrow {
-            animation: arrow 2s ease-in-out infinite;
-
-            #right,
-            #left {
-               display: none;
-            }
-         }
-      }
-
-      svg:hover {
-         transform: rotate(-90deg);
-
-         #ani {
-            stroke-dasharray: 200, 1;
-         }
-
-         #arrow {
-            transform: translateY(2px);
-            stroke: var(--primary-color);
-
-            line {
-               stroke-width: 6px;
-            }
-
-            #right,
-            #left {
-               display: block;
-            }
-         }
-      }
-
-      @keyframes arrow {
-
-         0%,
-         100% {
-            transform: translateY(2px);
-         }
-
-         50% {
-            transform: translateY(6px);
-         }
-      }
-   </style>
-
-   <path id="solid" d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
-   <path id="ani" d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
-   <g id="arrow">
-      <line id="left" x1="24" y1="25" x2="10" y2="14" />
-      <line id="center" x1="24" y1="1.3" x2="24" y2="25" />
-      <line id="right" x1="24" y1="25" x2="35" y2="14" />
-   </g>
-</svg>

package/template/src/utils/hooks.js

@@ -1,49 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-export function useQueryString() {
-  const getQueryString = useCallback(
-    () => ({
-      hash: window.location.hash.split('?')[0],
-      queryString: Object.fromEntries(
-        new URLSearchParams(window.location.hash.split('?')[1])
-      )
-    }),
-    []
-  )
-
-  const [queryString, setQueryString] = useState(getQueryString)
-
-  useEffect(() => {
-    const handlePopState = () => setQueryString(getQueryString())
-
-    window.addEventListener('popstate', handlePopState)
-    return () => {
-      window.removeEventListener('popstate', handlePopState)
-    }
-  }, [getQueryString])
-
-  return queryString
-}
-
-export function useResize() {
-  const getResize = useCallback(
-    () => ({
-      width: window.innerWidth,
-      height: window.innerHeight
-    }),
-    []
-  )
-
-  const [resize, setResize] = useState(getResize)
-
-  useEffect(() => {
-    const handleResize = () => setResize(getResize())
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [getResize])
-
-  return resize
-}