fix(docs): (timing) Add details and examples

markdown/dev/reference/plugins/timing/en.md

@@ -3,11 +3,11 @@ title: plugin-timing
 ---
 
 Published as [@freesewing/plugin-timing][1], this plugin measures
-detailed timing information while drafting a design and keeps it in the
+detailed timing information while drafting a design and adds it to the
 pattern store.
 
-It is intended to be used for developers trying to indicate which parts
+It is intended to be used by developers trying to determine which parts
-of their code are slow, or in general provide insights into the speed
+of their code are slow, or in general to provide insights into the speed
 at which a design can be drafted.
 
 ## Installation
@@ -24,22 +24,92 @@ Pattern.use()](/reference/api/pattern/use).
 
 To import the plugin for use:
 ```js
-import { timingPlugin } from '@freesewing/plugin-mirror'
+import { timingPlugin } from '@freesewing/plugin-timing'
 // or
-import { pluginTiming } from '@freesewing/plugin-mirror'
+import { pluginTiming } from '@freesewing/plugin-timing'
 ```
 
-<Fixme>
+## Information in `store`
 
-##### Provide in-depth example
+The plugin adds the following key/value pairs to the `store` before
+and after the pattern and parts drafting process.
 
-This is currently not used, but that will change once v3 gets closer to release.
+| Key | Description |
-At that point, we should provide an in-depth example here.
+|----------|-------------|
+| `timing.draft.start` | Timestamp for the start of the pattern drafting process |
+| `timing.draft.took` | Time it took to draft the pattern |
+| `timing.parts.[part name].start` | Timestamp for the start of the part drafting process |
+| `timing.parts.[part name].took` | Time it took to draft the part |
 
-</Fixme>
+<Note>
 
-## Notes
+Units and types depend on whether the pattern is generated in a browser
+or via Node.js.
 
-The mirror plugin is part of our [plugin-bundle](/reference/plugins/bundle)
+- If the pattern is generated in a browser,
+start timestamps are in microseconds, draft times are in milliseconds,
+and the values are Numbers.
+
+- If the pattern is generated via Node.js,
+start timestamps are in nanoseconds, draft times are in microseconds,
+and the values are
+[BigInts](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt).
+
+</Note>
+
+## Examples
+
+### Via Node.js
+
+```js
+import { Aaron } from '@freesewing/aaron'
+import { cisFemaleAdult34 } from "@freesewing/models"
+import { pluginTiming } from '@freesewing/plugin-timing'
+
+const pattern = new Aaron({
+  measurements: cisFemaleAdult34,
+})
+  .use(pluginTiming)
+
+const svg = pattern.draft().render()
+
+const patternTook = pattern.setStores[0].get(['timing', 'draft', 'took'])
+console.log('The Aaron pattern took ' + patternTook + ' µs to draft.')
+
+const frontTook = pattern.setStores[0].get(['timing', 'parts', 'aaron.front', 'took'])
+console.log('The aaron.front part took ' + frontTook + ' µs to draft.')
+
+console.log(JSON.stringify(pattern.setStores[0].timing,
+  (key, value) => typeof value === 'bigint' ? value.toString() : value))
+```
+
+### In a browser
+
+For example, in `designs/aaron/src/back.mjs`:
+
+```js
+import { pluginTiming } from '@freesewing/plugin-timing'
+import { front } from '@freesewing/aaron'
+
+export const back = {
+  from: front,
+  plugins: [ pluginTiming ],
+  draft: ({
+    store,
+    log,
+    part,
+...
+  }) => {
+...
+
+  const frontTook = store.get(['timing', 'parts', 'aaron.front', 'took'])
+  log.info('The aaron.front part took ' + frontTook + ' µs to draft.')
+
+  log.info(JSON.stringify(store.timing))
+
+  return part
+  },
+}
+```
 
 [1]: https://www.npmjs.com/package/@freesewing/plugin-timing